详细说明Flexbox基础属性

Flexbox基础属性

1. display: flex

• 作用：将容器设为Flex布局。

• 示例：

  .container {
    display: flex;
  }

2. flex-direction

• 作用：定义主轴方向。

• 取值：

• row（默认）：水平排列（左到右）。

• row-reverse：水平排列（右到左）。

• column：垂直排列（上到下）。

• column-reverse：垂直排列（下到上）。

• 示例：

  .container {
    flex-direction: row;
  }

3. flex-wrap

• 作用：控制子项是否换行。

• 取值：

• nowrap（默认）：不换行。

• wrap：换行（从上到下）。

• wrap-reverse：换行（从下到上）。

• 示例：

  .container {
    flex-wrap: wrap;
  }

4. justify-content

• 作用：定义子项在主轴上的对齐方式。

• 取值：

• flex-start（默认）：左对齐。

• flex-end：右对齐。

• center：居中。

• space-between：两端对齐，间隔相等。

• space-around：每个子项两侧间隔相等。

• 示例：

  .container {
    justify-content: center;
  }

5. align-items

• 作用：定义子项在交叉轴上的对齐方式。

• 取值：

• stretch（默认）：拉伸填满容器。

• flex-start：顶部对齐。

• flex-end：底部对齐。

• center：垂直居中。

• baseline：基线对齐。

• 示例：

  .container {
    align-items: center;
  }

6. align-content

• 作用：定义多行子项在交叉轴上的对齐方式（需flex-wrap: wrap）。

• 取值：

• stretch（默认）：拉伸填满容器。

• flex-start：顶部对齐。

• flex-end：底部对齐。

• center：垂直居中。

• space-between：两端对齐，间隔相等。

• space-around：每行两侧间隔相等。

• 示例：

  .container {
    align-content: space-between;
  }

7. flex-grow

• 作用：定义子项的放大比例（默认0，不放大）。

• 示例：

  .item {
    flex-grow: 1;
  }

8. flex-shrink

• 作用：定义子项的缩小比例（默认1，可缩小）。

• 示例：

  .item {
    flex-shrink: 0; /* 禁止缩小 */
  }

9. flex-basis

• 作用：定义子项的初始大小（默认auto）。

• 示例：

  .item {
    flex-basis: 100px;
  }

10. flex

• 作用：flex-grow、flex-shrink、flex-basis的简写。

• 示例：

  .item {
    flex: 1 0 auto; /* 放大 | 缩小 | 初始大小 */
  }

11. align-self

• 作用：覆盖单个子项的align-items对齐方式。

• 取值：同align-items。

• 示例：

  .item {
    align-self: flex-end;
  }

12. order

• 作用：定义子项的排列顺序（数值越小越靠前）。

• 示例：

  .item {
    order: 2; /* 默认0 */
  }