- 在容器上有 6 个属性
flex-direction: row | row-reverse | column | column-reverseflex-wrap: nowrap | wrap | wrap-reverseflex-flow: <flex-direction> || <flex-wrap>align-items: flex-start | flex-end | center | baseline | stretchjustify-content: justify-content: flex-start | flex-end | center | space-between | space-aroundalign-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,默认autoflex: 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
本文详细解析了Flex布局的12个核心属性,包括容器属性如flex-direction、flex-wrap、align-items等,以及项目属性如order、flex-grow、flex-shrink等。通过这些属性,可以实现网页元素的灵活布局。
468

被折叠的 条评论
为什么被折叠?



