CSS Flex佈局學習(CSS Flexible Box Layout)

摘要:

  • Updated:2018/11/27
  • W3C標準CSS Flex(Flexible Box)佈局學習
  • Flex佈局容器(container)與容器內元素(item)屬性說明

參考:

總結:

Flex佈局屬性列表
  屬性 取值(默認值) 說明
彈性容器屬性 flex-flow <‘flex-direction’> || <‘flex-wrap’>  
flex-direction row | row-reverse | column | column-reverse 主軸方向
flex-wrap nowrap | wrap | wrap-reverse 主軸方向換行方式
justify-content flex-start | flex-end | center | space-between | space-around 元素在主軸上的分佈方式
align-items flex-start | flex-end | center | baseline | stretch 元素在交叉軸上的對齊方式
align-content flex-start | flex-end | center | space-between | space-around | stretch 多主軸在交叉軸上的分佈方式
彈性元素屬性 flex none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] Initial: 0 1 auto  
flex-grow <number> Initial: 0 元素放大比例(默認不放大)
flex-shrink <number> Initial: 1 元素縮小比例(默認縮小)
flex-basis content | <‘width’> Initial: auto 元素最小尺寸(默認0)
order <integer> Initial: 0 元素排序順序
align-self auto | flex-start | flex-end | center | baseline | stretch 元素單獨對齊方式

術語:

Flexbox佈局術語
flex container 彈性(伸縮)容器
Flexbox 佈局座標系
flex item 彈性(伸縮)元素
main axis 主(座標)軸
cross axis 交叉(座標)軸
main start / end 主(座標)軸起(始,終)止位置
cross start / end 交叉(座標)軸起(始,終)止位置
main size 主(座標)軸尺寸(規模)
cross size 交叉(座標)軸尺寸(規模)

Flexbox佈局詳解:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章