Flex 布局 - 项目

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

容器部分

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

属性

order 定义项目的排列顺序

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

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

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

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

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

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

  1. 默认值为 auto ,即项目本来大小
  2. 可根据主轴方向设置为与 width 或 height 相同大小,项目则会占据固定空间

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