再次学习 flex 布局

1. 容器与项目

Flex 布局由容器（flex container）和项目（flex item）两个部分组成：

  • 容器默认存在两个轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿主轴排列。
  • Flex 属性包括容器属性和项目属性两个部分。

2. 容器属性

  • flex-direction: row | column | row-reverse | column-reverse：决定主轴方向。
  • flex-wrap: nowrap | wrap | wrap-reverse（换行，第一行在下方）：是否换行。
  • flex-flow: <flex-direction> <flex-wrap>：上面两个属性的简写。
  • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly：定义项目在主轴上的对齐方式。
  • align-items: flex-start | flex-end | center | baseline | stretch：交叉轴上的对齐方式。
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

3. 项目属性

  • order: <number>：定义项目排列顺序，默认 0，越小排列越靠前。
  • flex-grow: <number>：定义项目的伸缩比例，按照比例给项目分配空间，默认 0。
  • flex-shrink: <number>：定义项目的收缩比例，默认 1。
  • flex-basis: auto | <length>：相当于 width/height，定义在分配多余空间之前项目占据的主轴空间。
  • flex: <flex-grow> <flex-shrink> <flex-basis>：上面三个属性的简写。
  • align-self: auto | flex-start | flex-end | center | baseline | stretch：定义单个项目的对齐方式，覆盖 align-items 属性。

补充：

  • flex: 1 等价于 flex: 1 1 0%，表示"占满剩余空间"；flex: auto 等价于 flex: 1 1 auto；flex: none 等价于 flex: 0 0 auto。
  • flex 项目默认 min-width: auto，可能导致内容溢出不会被压缩，需要显式设置 min-width: 0 才能真正被挤压。