- 在容器上有 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