Flex 布局 - 项目

Flex 布局中用于控制子元素的一些属性

更多精彩

• 更多技术博客，请移步 asing1elife's blog

容器部分

1. 前续关于 Flex 容器的详解参见 Flex 布局 - 容器

属性

order 定义项目的排列顺序

1. 默认为 0
2. 数值越小，排列越靠前

flex-grow 定义项目的放大比例

1. 默认为 0 ，如果存在剩余空间，也不会放大
2. 数值越大，放大的优先级越高
3. 如果所有的项目都是 flex-grow: 1 ，则等分剩余空间
4. 如果一个项目是 flex-grow: 4 ，其他项目是 flex-grow: 1 ，则前者分配到的剩余空间比其他项多四倍
   image

flex-shrink 定义项目的缩小比例

1. 默认为 1 ，如果空间不足，则项目缩小
2. 如果所有项目都是 flex-shrink: 1 ，当空间不足时，所有项目等比例缩小
3. 如果一个项目是 flex-shrink: 0 ，其他项目是 flex-shrink: 1 ，当空间不足时，前者也不会缩小
   image

flex-basis 定义在分配多余空间之前，项目占据的主轴大小

1. 默认值为 auto ，即项目本来大小

2. 可根据主轴方向设置为与 width 或 height 相同大小，项目则会占据固定空间

   
   image

flex 是 flex-grow 和 flex-shrink 以及 flex-basis 的简写

1. 默认值是 0 1 auto
2. flex: auto 表示 1 1 auto
3. flex: none 表示 0 0 auto

align-self 允许单个项目与其他项目使用不一样的对齐方式

1. 默认值是 auto ，表示继承父容器的 align-items 属性值

2. 可覆盖定义在父容器中的 align-items

   
   image