Flex 布局详细总结

Flex 布局（Flexible Box Layout）是一种用于在容器中分配空间和对齐内容的 CSS 布局模型。它使得在复杂的布局中，元素能够灵活地适应可用空间。

主要概念

1. 容器与项目：

   • 容器：通过 display: flex; 或 display: inline-flex; 声明的元素。
   • 项目：容器内部的直接子元素。

2. 主轴与交叉轴：

   • 主轴：默认方向为水平方向（flex-direction: row;）。
   • 交叉轴：垂直于主轴的方向。

容器属性

• display: 设置为 flex 或 inline-flex。
• flex-direction: 定义主轴方向（row, row-reverse, column, 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）。
• gap: 定义项目之间的间距。

项目属性

• flex-grow: 定义项目的放大比例，默认为 0。

• flex-shrink: 定义项目的缩小比例，默认为 1。

• flex-basis: 定义项目在主轴上的初始大小，默认值为 auto。

• flex: flex-grow, flex-shrink 和 flex-basis 的简写形式。

  flex 语法规则

  单值语法：值必须是以下之一：

  • 一个 <flex-grow> 的有效值：此时简写会扩展为 flex: <flex-grow> 1 0。
  • 一个 <flex-basis> 的有效值：此时简写会扩展为 flex: 1 1 <flex-basis>。
  • 关键字 none 或者全局关键字之一。

  双值语法

  • 第一个值必须是一个 flex-grow 的有效值。

  • 第二个值必须是以下之一：

  1. 一个 flex-shrink 的有效值：此时简写会扩展为 flex: <flex-grow> <flex-shrink> 0。
  2. 一个 flex-basis 的有效值：此时简写会扩展为 flex: <flex-grow> 1 <flex-basis>。

  三值语法：值必须按照以下顺序指定：

  • 一个 flex-grow 的有效值。
  • 一个 flex-shrink 的有效值。
  • 一个 flex-basis 的有效值。

• align-self: 定义单个项目在交叉轴上的对齐方式，覆盖 align-items 的设置（auto, flex-start, flex-end, center, baseline, stretch）。

使用示例

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.item {
    flex: 1 1 200px; /* flex-grow | flex-shrink | flex-basis */
    padding: 10px;
}

MDN