CSS3中flex伸縮盒子的使用

標籤：reverse   沒有   rect   檢索   etc   參考   比例   cti   nowrap   

flex伸縮盒子：

在父盒子中設定display： flex；子盒子中分別設定flex： 1，按比例設定flex屬性值。

其他屬性如下：

1、flex-grow：<number>  // 用數值來定義擴充比率。不允許負值

2、flex-shrink：<number>  // 用數值來定義收縮比率。不允許負值

3、flex-basis：<length> | <percentage>  // 設定或檢索彈性盒伸縮基準值。

4、flex-flow：<‘ flex-direction ‘> || <‘ flex-wrap ‘>  // 複合屬性。設定或檢索彈性盒模型對象的子項目相片順序。

5、flex-direction：row | row-reverse | column | column-reverse  // 該屬性通過定義flex容器的主軸方向來決定felx子項在flex容器中的位置。這將決定flex需要如何進行排列。取值row：主軸與行內軸方向作為預設的書寫入模式。即橫向從左至右排列（靠左對齊）。row-reverse：對齊與row相反。column：主軸與塊軸方向作為預設的書寫入模式。即縱向從上往下排列（頂對齊）。column-reverse：對齊與column相反。

6、flex-wrap：nowrap | wrap | wrap-reverse  // 該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。nowrap：flex容器為單行。該情況下flex子項可能會溢出容器wrap：flex容器為多行。該情況下flex子項溢出的部分會被放置到新行，子項內部會發生斷行wrap-reverse：反轉 wrap 排列。

7、align-content：flex-start | flex-end | center | space-between | space-around | stretch // 當伸縮容器的側軸還有多餘空間時，本屬性可以用來調準「伸縮行」在伸縮容器裡的對齊，這與調準伸縮項目在主軸上對齊的 <‘ justify-content ‘> 屬性類似。請注意本屬性在只有一行的伸縮容器上沒有效果。

...........

參考來源： http://www.css88.com/book/css/properties/flex/align-items.html

 

CSS3中flex伸縮盒子的使用