FlexBox 語法指引

FlexBox 語法指引

容器屬性

• display : flex | inline-flex

  • CSS的columns在伸縮容器上沒有效果。
  • float、clear和vertical-align在伸縮項目上沒有效果

• flex-direction: row | row-reverse | column | column-reverse

  • 主軸方向

• flex-wrap: nowrap | wrap | wrap-reverse

  • 定義容器單行仍是多行
  • 側軸方向決定了新行方向

• flex-flow: row nowrap

  • flex-direction & flex-wrap的縮寫版本

• justify-content: flex-start | flex-end | center | space-between | space-around

  • 定義子元素沿着主軸的對齊方式

• align-items: flex-start | flex-end | center | baseline | streth

  • 定義子元素在當前行側軸上的對齊方式

• align-content: flex-start | flex-end | center |space-between | space-around | stretch

  • 在只有一行的容器上沒有效果，必須多行
  • 處理多行之間在側軸上的對齊方式

子元素

• order: number

  • 控制顯示順序

• flex-grow: number | 默認爲0

  • 定義子元素在容器內向外的擴展能力
  • 能夠爲負數

• flex-shrink: number | 默認爲1

  • 定義子元素收縮的能力
  • 能夠爲負數

• flex-basis: length | 默認爲auto

  • 設置子元素伸縮基準值，剩餘空間按比率伸縮

• flex: 0 1 auto | grow shrink basis

  • 是flex-grow & flex-shrink & flex-basis的縮寫

• align-self: auto | flex-start | flex-end | center | baseline | stretch

  • 在單獨的子元素上覆寫默認的對齊方式

• 資料

  • flexbox