文章專區

網頁設計相關文章

CSS3的flexbox版面配置-flex items(子項目)可用的屬性

 上回介紹了flex-container(容器)可使用的屬性,這次來介紹flex-items(子項目)可操作的屬性。

一樣先來張flexbox盒子模型圖複習一下(來源:MDN)

 

關於flex-items可操作的屬性,有以下幾項:

order可以決定項目的排列順序。

 

例:下面兩圖僅差在是否加入了order,若未加order指定順序的話會如右圖所示。左圖則是已加入order

 

flex-grow可設定項目們在容器內的比例。

例:每個項目在容器內的比例是2:1:3:2

 

flex-shrinkflex-grow相反,當項目將容器擠爆時,flex-shrink會把項目們縮小設定的比例。會根據flex-shrink設定的值來決定縮小的倍數。

 

下圖的縮小倍數比:1:2:3:4:5

 

flex-basis項目的基本大小,有點類似min-width,算是代替width用的,優先權比width高,但若兩者其中之一為auto,會以沒設auto的為優先。

關於flex-growflex-shrinkflex-basis此三項屬性,這邊有更詳細的解釋

 

 

flexflex-growflex-shrinkflex-basis三個屬性組成,例:.flex{flex:2 1 300px;}

 

align-self可以指定某個項目的行為,會覆蓋容器align-items的設定。

auto:預設值,繼承容器的align-items屬性,若沒有則為stretch

flex-start對齊容器最上面的cross start

flex-end對齊容器最下面的cross end

center垂直置中

stretchflex項目撐開至容器的高度

baseline以所有flex項目的基線作為對齊標準

例:下圖本來將容器設align-items: flex-start(靠齊最上方)。然而在第三項與第四項分別設了align-self: center(垂直置中)align-self: flex-end(靠齊最下方),覆蓋了容器align-items: flex-start的設定。