Flexbox布局概念

Flexbox布局（ Flexible Box 或CSS3 彈性布局），是CSS3中的一種新的布局模式，是可以自動調(diào)整子元素的高和寬，來很好的填充任何不同屏幕大小的顯示設(shè)備中的可用顯示空間，收縮內(nèi)容防止內(nèi)容溢出，確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?。使用Flexbox來布局更容易，可以使用更少的代碼，更簡單的方式實現(xiàn)更復(fù)雜的布局，例如對齊方式，排列方向，排列順序（這也是Flexbox布局的核心能力所在），彈性盒中的子元素通過在各個方向放置就可以以彈性的尺寸適應(yīng)父元素的顯示區(qū)域。由于子元素的顯示順序和它們在代碼中 的順序是獨立的，通過使用彈性盒，定位子元素變得更加簡單，復(fù)雜的布局也能夠使用更清晰的代碼更簡單的實現(xiàn)。獨立顯示被設(shè)定成只針對可見元素，而不是基于代碼的聲明和導(dǎo)航順序。

不同于塊級元素基于垂直方向布局以及行內(nèi)元素基于水平方向布局，彈性盒布局的算法是方向無關(guān)的。 雖然塊級元素布局在頁面中工作良好，但是其定義不足以支持那種需要根據(jù)用戶代理從豎直切換成水平等變化而進行方向切換、大小調(diào)整、拉伸、收縮的引用組件。不同于將要出現(xiàn)的網(wǎng)格布局針對目標(biāo)為大比例布局，彈性盒布局更適用于應(yīng)用組件和小比例布局。這兩種都是CSS工作組為了能與不同用戶代理、不同書寫模式和其他彈性需要進行協(xié)作而做出的努力。

名詞與基礎(chǔ)

Flexbox是一個完整的布局模塊，不是單一的屬性，設(shè)計的屬性有很多。Flexbox布局主要由父容器和它的直接子元素組成，其中父容器被稱之為flex container（flex容器），而其直接的子元素稱作為flex item（flex元素）。

Flexbox布局按照寬和高涉及的基本概念名稱有main axis(主軸)和cross axis(交叉軸，和主軸垂直)，主軸起點邊稱為main start,主軸終點邊稱為main end，交叉軸起點邊稱為cross start,交叉軸終點邊稱為cross end。如圖：

main axis（主軸）:Flex容器的主軸主要用來排列Flex元素。它不一定是水平，這主要取決于flex-direction屬性。
main-start（主軸起點邊） | main-end（主軸終點邊）:Flex元素的排列從容器的主軸起點邊開始，往主軸終點邊結(jié)束。
main size:Flex元素的在主軸方向的寬度或高度就是項目的主軸長度，F(xiàn)lex元素的主軸長度屬性是width或height屬性，由哪一個對著主軸方向決定。
cross axis（和主軸垂直交叉的軸）:與主軸垂直的軸稱作交叉軸。
cross-start（交叉軸起點邊） | cross-end（交叉軸終點邊）:伸縮行的排列從容器的交叉軸起點邊開始，往交叉軸終點邊結(jié)束。
cross size:Flex元素的在交叉軸方向的寬度或高度就是項目的交叉軸長度，F(xiàn)lex元素的交叉軸長度屬性是width或height屬性，由哪一個對著交叉軸方向決定。

例子

新的 flexbox 布局模式被用來重新定義CSS中的布局方式。很遺憾的是最近規(guī)范變動過多，導(dǎo)致各個瀏覽器對它的實現(xiàn)也有所不同。不過我仍舊想要分享一些例子，來讓你知道即將發(fā)生的改變。這些例子目前只能在支持 flexbox 的 Chrome 瀏覽器中運行，基于最新的標(biāo)準(zhǔn)。
使用flexbox你還可以做的更多；這里只是一些讓你了解概念的例子：

使用 Flexbox 的簡單布局

使用 Flexbox 的牛逼布局

最新評論