CSS Flex 筆記

主軸,次軸

啟用: 父層設定 display:flex

justify-content: flex-start , center , flex-end
justify-content: space-around , space-between

資料流 橫:左到右  直:上到下

align-items(單行子物件) align-content(多行子物件)
align-items: flex-start , center , flex-end , stretch

flex-wrap:wrap;(換行) nowrap/wrap/wrap-reverse
flex-direction:row; //( row/column/row-reverse/column-reverse )
整合flex-direction,flex-wrap
flex-flow:row wrap;

align-self: flex-start;

延展比:flex-grow //剩下來的空間做分配
收縮比:flex-shrink //
基本比:flex-basis //控制主軸方向的長度