全面解析 CSS Flex 布局：从入门到精通的所有属性详解

1. Flex 容器属性

通过 display: flex 或 display: inline-flex 将元素设置为 Flex 容器。以下是所有容器属性。

1.1 display: flex | inline-flex

• 作用：定义一个 Flex 容器。
• 可选值：
  • flex：块级容器，占据整行。
  • inline-flex：行内块容器，宽度随内容自适应。
• 示例：

  .container {display: flex;
  }
  .inline-container {display: inline-flex;
  }
  

  效果：flex 使容器占满整行，inline-flex 宽度随内容变化。

1.2 flex-direction

• 作用：定义主轴方向。
• 可选值：
  • row（默认）：水平从左到右。
  • row-reverse：水平从右到左。
  • column：垂直从上到下。
  • column-reverse：垂直从下到上。
• 示例：

  .container {display: flex;flex-direction: column;
  }
  

  效果：子项垂直排列，从上到下。

1.3 flex-wrap

• 作用：控制子项是否换行。
• 可选值：
  • nowrap（默认）：单行排列，可能压缩子项。
  • wrap：多行排列，子项超出容器时换行。
  • wrap-reverse：多行排列，行顺序反转。
• 示例：

  .container {display: flex;flex-wrap: wrap;
  }
  

  效果：子项超出容器宽度时自动换行。

1.4 flex-flow

• 作用：flex-direction 和 flex-wrap 的简写。
• 语法：flex-flow: <flex-direction> <flex-wrap>;
• 示例：

  .container {display: flex;flex-flow: row wrap;
  }
  

  效果：子项水平排列，支持换行。

1.5 justify-content

• 作用：控制主轴上子项的对齐方式。
• 可选值：
  • flex-start（默认）：靠主轴起点。
  • flex-end：靠主轴终点。
  • center：居中对齐。
  • space-between：两端对齐，间距均分。
  • space-around：子项周围间距相等。
  • space-evenly：间距完全均等。
• 示例：

  .container {display: flex;justify-content: space-between;
  }
  

  效果：子项两端对齐，剩余空间均分。

1.6 align-items

• 作用：控制交叉轴上子项的对齐方式（单行）。
• 可选值：
  • stretch（默认）：子项拉伸填满交叉轴。
  • flex-start：靠交叉轴起点。
  • flex-end：靠交叉轴终点。
  • center：居中对齐。
  • baseline：按文本基线对齐。
• 示例：

  .container {display: flex;align-items: center;
  }
  

  效果：子项在交叉轴上居中。

1.7 align-content

• 作用：控制多行子项在交叉轴上的对齐方式（需 flex-wrap: wrap）。
• 可选值：
  • stretch（默认）：行拉伸填满交叉轴。
  • flex-start：靠交叉轴起点。
  • flex-end：靠交叉轴终点。
  • center：居中对齐。
  • space-between：两端对齐，间距均分。
  • space-around：行周围间距相等。
  • space-evenly：行间距完全均等。
• 示例：

  .container {display: flex;flex-wrap: wrap;align-content: space-around;
  }
  

  效果：多行子项在交叉轴上均匀分布。

1.8 gap, row-gap, column-gap

• 作用：设置子项间距。
• 可选值：长度值（如 10px、1rem）。
• 说明：
  • gap：同时设置行间距和列间距。
  • row-gap：单独设置行间距。
  • column-gap：单独设置列间距。
• 示例：

  .container {display: flex;gap: 20px;
  }
  

  效果：子项间水平和垂直间距为 20px。

2. Flex 子项属性

Flex 子项（容器的直接子元素）通过以下属性控制自身行为。

2.1 flex-grow

• 作用：定义子项分配主轴剩余空间的比例。
• 可选值：非负整数（默认 0）。
• 说明：值越大，子项占用剩余空间越多。
• 示例：

  .item1 {flex-grow: 1;
  }
  .item2 {flex-grow: 2;
  }
  

  效果：item2 占用剩余空间是 item1 的两倍。

2.2 flex-shrink

• 作用：定义子项在主轴上压缩的比例。
• 可选值：非负整数（默认 1）。
• 说明：值越大，空间不足时子项压缩越多。
• 示例：

  .item1 {flex-shrink: 0;
  }
  .item2 {flex-shrink: 2;
  }
  

  效果：空间不足时，item1 不压缩，item2 压缩更多。

2.3 flex-basis

• 作用：定义子项在主轴上的初始大小。
• 可选值：长度值（如 100px、20%）或 auto（默认）。
• 说明：优先级高于 width 或 height。
• 示例：

  .item {flex-basis: 200px;
  }
  

  效果：子项初始宽度为 200px。

2.4 flex

• 作用：flex-grow、flex-shrink 和 flex-basis 的简写。
• 语法：flex: <flex-grow> <flex-shrink> <flex-basis>;
• 常用值：
  • flex: 1：等同于 flex: 1 1 0%。
  • flex: auto：等同于 flex: 1 1 auto。
  • flex: none：等同于 flex: 0 0 auto。
• 示例：

  .item {flex: 1 1 200px;
  }
  

  效果：子项初始宽度 200px，可伸缩。

2.5 align-self

• 作用：单独控制子项在交叉轴上的对齐，覆盖 align-items。
• 可选值：auto（默认，继承 align-items）、flex-start、flex-end、center、baseline、stretch。
• 示例：

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

  效果：该子项靠交叉轴终点对齐。

2.6 order

• 作用：控制子项排列顺序。
• 可选值：整数（默认 0）。
• 说明：值越小，子项越靠前。
• 示例：

  .item1 {order: 2;
  }
  .item2 {order: 1;
  }
  

  效果：item2 排在 item1 之前。

3. 常见问题：flex: 1 导致无法固定宽度或高度

3.1 问题描述

使用 flex: 1（等同于 flex: 1 1 0%）时，子项会忽略显式设置的 width 或 height，导致无法固定宽度或高度。这是因为：

• flex: 1 设置了 flex-basis: 0%，使子项的初始主轴尺寸为 0，优先级高于 width 或 height。
• flex-grow: 1 使子项尽可能占用剩余空间。
• 当主轴为水平方向（flex-direction: row），width 被忽略；当主轴为垂直方向（flex-direction: column），height 被忽略。

示例（问题重现）：

.container {display: flex;
}
.item {flex: 1;width: 200px; /* 被忽略 */height: 100px;
}

效果：子项宽度由剩余空间决定，width: 200px 无效。

3.2 解决方案

要固定宽度或高度，可以通过以下方式解决：

1. 使用 flex-basis 明确指定初始尺寸：

   .item {flex: 1 1 200px; /* flex-basis 设置为 200px */height: 100px;
   }
   

   效果：子项宽度固定为 200px，同时保持伸缩能力。

2. 设置 flex: none 或 flex: 0 0 200px：

   .item {flex: none; /* 等同于 flex: 0 0 auto */width: 200px;height: 100px;
   }
   

   效果：子项宽度固定为 200px，不伸缩。

3. 使用 min-width 或 max-width 限制尺寸：

   .item {flex: 1;min-width: 200px;max-width: 200px;height: 100px;
   }
   

   效果：子项宽度固定为 200px，防止被拉伸或压缩。

4. 在 flex-direction: column 中固定高度：

   .container {display: flex;flex-direction: column;
   }
   .item {flex: 0 0 100px; /* 固定高度 */width: 200px;
   }
   

   效果：子项高度固定为 100px。

3.3 注意事项

• 优先级：flex-basis 优先级高于 width 或 height，但 min-width/max-width 和 min-height/max-height 优先级更高。
• 场景选择：根据需求选择 flex: none（完全固定）或 flex: 1 1 200px（固定初始尺寸但允许伸缩）。
• 调试技巧：使用浏览器的开发者工具检查子项的计算尺寸，确认是否被 flex-basis 覆盖。

4. 实战示例：居中布局与响应式卡片

以下是一个综合示例，展示如何使用 Flex 布局实现居中和响应式卡片，并解决 flex: 1 的尺寸问题。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Flex 布局示例</title><style>.container {display: flex;flex-flow: row wrap;justify-content: space-around;align-items: center;gap: 20px;min-height: 100vh;background: #f0f0f0;}.card {flex: 0 0 200px; /* 固定宽度 200px */background: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);text-align: center;height: 100px; /* 固定高度 */}.card:nth-child(2) {align-self: flex-end;order: -1;}</style>
</head>
<body><div class="container"><div class="card">卡片 1</div><div class="card">卡片 2</div><div class="card">卡片 3</div></div>
</body>
</html>

效果说明：

• 使用 flex: 0 0 200px 确保卡片宽度固定为 200px，不会被拉伸或压缩。
• height: 100px 固定卡片高度。
• flex-flow: row wrap 支持换行，justify-content: space-around 和 gap: 20px 确保间距均匀。
• 第二个卡片通过 align-self 和 order 调整位置和顺序。

5. 常见问题与解决方案

1. 为什么子项没有拉伸？
   • 检查 align-items 是否为 stretch，且子项没有固定高度。
2. 为什么子项不换行？
   • 确保 flex-wrap 设置为 wrap 或 wrap-reverse。
3. 为什么 flex: 1 导致宽度/高度失效？
   • 参考第 3 节，使用 flex-basis 或 min-width/max-width 固定尺寸。
4. 如何实现完美居中？
   • 使用 justify-content: center 和 align-items: center。

6. 总结

Flex 布局通过其强大的容器和子项属性，为开发者提供了灵活的布局控制能力。特别需要注意的是，flex: 1 会导致 flex-basis: 0%，从而覆盖显式设置的 width 或 height。通过合理设置 flex-basis、min-width/max-width 或 flex: none，可以轻松解决尺寸固定问题。希望这篇教程能帮助你从入门到精通 Flex 布局，快速应用到实际项目中！

点个收藏，关注前端结城，一起用代码点亮前端世界！🚀