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