Flexbox
Last updated
Was this helpful?
Last updated
Was this helpful?
display: flex 指定 DOM 為 flexbox。
row main-axis 由左至右 cross-axis 由上至下
row-reverse main-axis 由右至左 cross-axis 由上至下
column main-axis 由上至下 cross-axis 由左至右
column-reverse main-axis 由下至上 cross-axis 由左至右
nowrap 內容會超出 container
wrap 內容不會超出 container,會自動換行
wrap-reverse 內容不會超出 container,但 cross-axis 會相反。
控制 main-axis 剩餘空間的排版
控制 cross-axis 剩餘空間的排版
控制 cross-axis 內容的排版
stretch 占滿整個空間
flex-start 向頭對齊
flex-end 向尾對齊
center 置中對齊
space-between 頭尾沒有空間,空間分散到檔案間
space-around
space-evenly 空間平均分布
baseline 對齊第一行
覆蓋 align-items 的設定
flex-grow
0 不分配剩餘空間 >= 1 按比例分配剩餘空間
flex-shrink
1 剩餘空間不夠,會自動縮減 item 空間,0 不會縮減 item 空間。
flex-basis
設定 item width
設定 item 的排列順序 >0 往後排列 <0 往前排列
content —> width —> flex-basis (limted by max|min-width)