標籤: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伸縮盒子的使用