CSS3中的Flexbox彈性佈局（一）

CSS3引入了一種新的佈局模式——Flexbox佈局，即伸縮佈局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分佈一個容器裏項目佈局，即便它們的大小是未知或者動態的，這裏簡稱爲Flex。

 

一、如何才能讓DIV的寬度跟隨瀏覽器窗口變化而變換呢？在CSS3中咱們只要使用一個box-flex屬性，使得咱們的盒佈局變成彈性盒佈局便可，兼容性寫法：

-webkit-box-flex（safari瀏覽器、chrome瀏覽器）

-moz-box-flex（firefox瀏覽器）

 

連接：https://cruxf.github.io/FlexBox/flexbox1

 

二、改變元素的顯示順序

使用彈性佈局的時候，能夠經過box-ordinal-group屬性來改變各個元素的顯示順序，在每一個元素中加入box-ordinal-group屬性，這個屬性使用一個表示序號的正數屬性值，瀏覽器在顯示的時候根據序號從小到大來顯示這些元素，兼容性寫法：

-webkit-box-ordinal-group（safari瀏覽器、chrome瀏覽器）

-moz-box-ordinal-group（firefox瀏覽器）

連接：https://cruxf.github.io/FlexBox/flexbox2

 

三、改變元素的排列方向

使用彈性盒佈局的時候，能夠經過box-orient來指定多個元素的排列方向，屬性值有：horizon和vertical，兼容性寫法：

-webkit-box-orient（safari瀏覽器、chrome瀏覽器）

-moz-box-orient（firefox瀏覽器）

連接：https://cruxf.github.io/FlexBox/flexbox3

 

四、元素的寬度與高度自適應

使用彈性盒佈局的時候，元素的寬度和高度具備自適應性，就是元素的高度和寬度能夠根據排列方向的改變而改變。

連接：https://cruxf.github.io/FlexBox/flexbox4

 

五、使用彈性佈局來消除空白

方法就是給予div中加入一個box-flex屬性

連接：https://cruxf.github.io/FlexBox/flexbox5

 

六、對多個元素使用box-flex屬性

讓瀏覽器或者容器中的元素總寬度或者總高度都等於瀏覽器或者是容器的高度

 

 連接：https://cruxf.github.io/FlexBox/flexbox6

 

七、指定水平方向與垂直方向的對其方式

使用盒佈局的時候，能夠使用box-pack屬性及box-align屬性來指定元素中的文字、圖像、以及子元素的水平方向或者是垂直方向上的對齊方式，兼容性寫法：

-webkit-box-pack（safari瀏覽器、chrome瀏覽器）

-moz-box-pack（firefox瀏覽器）

-webkit-box-align（safari瀏覽器、chrome瀏覽器）

-moz-box-align（firefox瀏覽器）

連接：https://cruxf.github.io/FlexBox/flexbox7