Flex 屬性清單

• 在容器上有 6 個屬性
  • flex-direction: row | row-reverse | column | column-reverse
  • flex-wrap: nowrap | wrap | wrap-reverse
  • flex-flow: <flex-direction> || <flex-wrap>
  • align-items: flex-start | flex-end | center | baseline | stretch
  • justify-content: justify-content: flex-start | flex-end | center | space-between | space-around
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch
• 在項目上有 6 個屬性
  • order: <integer>，默認 0.
  • flex-grow: <number>，默認 0.
  • flex-shrink: <number>，默認 1. 當值爲 0 時，不會因空間不足而被壓縮。
  • flex-basis: <length> | auto，默認 auto
  • flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
  • align-self: auto | flex-start | flex-end | center | baseline | stretch

文獻

• https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html