文章專區
網頁設計相關文章
CSS3的flexbox版面配置-flex items(子項目)可用的屬性
上回介紹了flex-container(容器)可使用的屬性,這次來介紹flex-items(子項目)可操作的屬性。
一樣先來張flexbox盒子模型圖複習一下(來源:MDN)
關於flex-items可操作的屬性,有以下幾項:
order可以決定項目的排列順序。
例:下面兩圖僅差在是否加入了order,若未加order指定順序的話會如右圖所示。左圖則是已加入order。
flex-grow可設定項目們在容器內的比例。
例:每個項目在容器內的比例是2:1:3:2
flex-shrink與flex-grow相反,當項目將容器擠爆時,flex-shrink會把項目們縮小設定的比例。會根據flex-shrink設定的值來決定縮小的倍數。
下圖的縮小倍數比:1:2:3:4:5
flex-basis項目的基本大小,有點類似min-width,算是代替width用的,優先權比width高,但若兩者其中之一為auto,會以沒設auto的為優先。
關於flex-grow、flex-shrink、flex-basis此三項屬性,
flex由flex-grow、flex-shrink、flex-basis三個屬性組成,例:.flex{flex:2 1 300px;}
align-self可以指定某個項目的行為,會覆蓋容器align-items的設定。
auto:預設值,繼承容器的align-items屬性,若沒有則為stretch
flex-start:對齊容器最上面的cross start
flex-end:對齊容器最下面的cross end
center:垂直置中
stretch:將flex項目撐開至容器的高度
baseline:以所有flex項目的基線作為對齊標準
例:下圖本來將容器設align-items: flex-start(靠齊最上方)。然而在第三項與第四項分別設了align-self: center(垂直置中)與align-self: flex-end(靠齊最下方),覆蓋了容器align-items: flex-start的設定。