IE10中的Flexbox布局屬性使用具體詳解

文章簡介：IE10中的Flexible Box("Flexbox")布局.

經過這一系列對Flexbox的介紹，我想大家對Flexbox在布局中的使用以及其強大功能特性給我們布局帶來的方便性都有所瞭解。話又說回來，雖然Flexbox功能強大（特別是彈性布局），但還是很多同學不敢使用，也不想嘗試性使用。我想主要原因出於他的文法版本眾多，瀏覽器對其相容性等。

在《“老”的Flexbox和“新”的Flexbox》一文中，讓我們瞭解了如何識別Flexbox的文法版本，而在《使用Flexbox：新舊文法混用實現最佳瀏覽器安全色》和《跨瀏覽器的Flexbox》能實現瀏覽器的完美相容性。

Flexbox Layout模組的相容圖：

既然有方案能讓Flexbox布局模組在眾多瀏覽器下實現相容，那我們今天要說什麼呢？從瀏覽器的相容性中可以看出，Flexbox布局模組的最新文法“display:flex”在Chrom25.0+、Opera12.1，Firefox22+、IE11+都得到了支援，但我們還有很多使用者並不像我們這些前端人員會及時更新自己所用瀏覽器的版本。那麼就存在Flexbox的相容性問題。說了一大堆的廢話，還未進來主題，真有點對不住讀者，接下來也不浪費大家寶貴時間，我們一起進入今天的主題——IE10中的Flexible Box("Flexbox")布局

回憶Flexbox布局的功能

前面的教程也提到過Flexbox布局用於設計比較複雜的頁面非常有用。可以輕鬆的實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變。同時減少了依賴於浮動布局實現元素位置的定義以及重設元素的大小。簡單點來說，Flexbox實現在不需要媒體查詢的情況之下，能很好的實現響應式的布局。（有關於Flexbox實現響應布局，大家可以參考一下《響應式設計的未來——Flexbox》一文）。

Flexbox布局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多餘空音平均分配給多個伸縮項目，當然如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據一定的比例減小伸縮項目的大小，使其不溢出伸縮容器。

綜合而言，Flexbox布局功能主要具有以下幾點：

1. 螢幕和瀏覽器視窗大小發生改變也可以靈活調整布局；
2. 可以指定伸縮項目沿著主軸或側軸按比例分配多餘空間（伸縮容器多餘空間），從而調整伸縮項目的大小；
3. 可以指定伸縮項目沿著主軸或側軸將伸縮容器多餘空間，分配到伸縮項目之前、之後或之間；
4. 可以指定如何將垂直於元素布局軸的多餘空間分布到該元素的周圍；
5. 可以控制元素在頁面上的布局方向；
6. 可以按照不同於文件物件模型（DOM）所指定排序方式對螢幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先後順序重排伸縮項目順序。

Flexbox布局的文法版本

Flexbox布局的文法經過幾年發生了很大的變化，也給Flexbox的使用帶來一定的局限性，因為文法版本眾多，瀏覽器支援不一致，致使Flexbox布局使用不多。從前面的教程中我們可以得知，Flexbox布局主要有三種文法版本：

1. 2009版本，我們稱之為老版本，使用的是“display:box”或者“display:inline-box”；
2. 2011版本，我們稱之為混合版本，使用的是“display:flexbox”或者“display:inline-flexbox”；
3. 2013版本，也就是最新文法版本，使用的是“display:flex”或者“display:inline-flex”。

如何區別這些版本？又如何擷取對應版本的相關知識，大家可以簡單的瀏覽一下《“老”的Flexbox和“新”的Flexbox》一文。

在瞭解了Flexbox布局版本的曆史發展之後，我們今天要介紹的IE10中的Flexbox布局所使用的文法就是介於2009年老版本和2013年新版本之間的混合版本——flexbox(display:flexbox或display:inline-flexbox)。

[1] [2] [3] [4] [5]  下一頁