Please enable JavaScript.
Coggle requires JavaScript to display documents.
flexbox (flex-direction (row-reverse, column, row, column-reverse), 子層設定…
flexbox
flex-direction
row-reverse
column
row
column-reverse
子層設定
align-self設定單一次軸
order數值越大排越後面
可設定負值
flex: grow shrink basis
預設flex:0 1 auto
flex-grow
伸展的意思
把剩下來的空間做分配，分配給每一個
flex-basis
控制主軸長度
橫向＝設定他的寬
直向＝設定她的高
flex-basis設定為0
可透過flex-grow設定他的等比例填滿
flex-shink
flex-shink
設定為零
會超出父層
flex-shink收縮比
總比值 各子項目寬度＊收縮值，並加總這所有子項目計算結果
超出值
扣除值（每一個欄要扣多少）
（子項目寬＊收縮比/總比值）＊超出值＝扣除值
align-items就是交叉軸
flex-wrap
預設nowrap不換行
wrap換行
justify-content
space-betwwn
space-around
center
space-evenly
start
交叉軸
align-items（針對單航子物件）
center
start
箭頭反方向為次軸方向
stretch(預設）伸展最大
end
align-content(針對具有多行的子物件）
align-content
多行flex-end
多行至中center
資料流向
