CSS3 彈性盒子簡介

    當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)，CSS3彈性盒（Flexible Box或flexbox )確保元素?fù)碛星‘?dāng)?shù)男袨椴季址绞健?/p>

    傳統(tǒng)的div+css布局方式是依賴于盒子模型的，基于display屬性，如果需要的話，還會(huì)用上position和float屬性，但是這些屬性想要應(yīng)用于特殊布局則非常困雉（如垂直居中）。對于新手來說，這些屬性極其不友好。很多新手弄不清楚absolute和relative的區(qū)別。當(dāng)它們應(yīng)用于元素時(shí)，新手很難明白這些元素的top、left等值到底是相對于頁面還是父級元素來進(jìn)行定位。

    在2009年，W3C提出了一種新的方案一Flex布局。Flex布局可以更加簡便地完整地實(shí)現(xiàn)各種頁面布局方案。flex-box (彈性盒子）用于給盒子模型以最大的靈活性，任何一個(gè)容器都可以設(shè)置成一個(gè)彈性盒子。需要注意的是，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將會(huì)失效。