武林網(www.49028c.com)文章簡介：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布局用于設計比較復雜的頁面非常有用?？梢暂p松的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變。同時減少了依賴于浮動布局實現元素位置的定義以及重置元素的大小。簡單點來說，Flexbox實現在不需要媒體查詢的情況之下，能很好的實現響應式的布局。（有關于Flexbox實現響應布局，大家可以參考一下《響應式設計的未來——Flexbox》一文）。

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

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

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

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

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