Flex 布局中用于控制子元素的一些属性
更多精彩
- 更多技术博客，请移步 asing1elife's blog
容器部分
- 前续关于 Flex 容器的详解参见 Flex 布局 - 容器
属性
order 定义项目的排列顺序
- 默认为 0
- 数值越小，排列越靠前
flex-grow 定义项目的放大比例
- 默认为 0 ，如果存在剩余空间，也不会放大
- 数值越大，放大的优先级越高
- 如果所有的项目都是
flex-grow: 1，则等分剩余空间 - 如果一个项目是
flex-grow: 4，其他项目是flex-grow: 1，则前者分配到的剩余空间比其他项多四倍
image
flex-shrink 定义项目的缩小比例
- 默认为 1 ，如果空间不足，则项目缩小
- 如果所有项目都是
flex-shrink: 1，当空间不足时，所有项目等比例缩小 - 如果一个项目是
flex-shrink: 0，其他项目是flex-shrink: 1，当空间不足时，前者也不会缩小
image
flex-basis 定义在分配多余空间之前，项目占据的主轴大小
- 默认值为 auto ，即项目本来大小
-
可根据主轴方向设置为与 width 或 height 相同大小，项目则会占据固定空间
image
flex 是 flex-grow 和 flex-shrink 以及 flex-basis 的简写
- 默认值是
0 1 auto -
flex: auto表示1 1 auto -
flex: none表示0 0 auto
align-self 允许单个项目与其他项目使用不一样的对齐方式
- 默认值是 auto ，表示继承父容器的 align-items 属性值
-
可覆盖定义在父容器中的 align-items
image
