4、Flex弹性布局（上）：Flex容器属性

Flex布局，说白了就是CSS里最让我省心的布局方案。以前做浮动布局时，每次都要清浮动、算宽度，稍不留神就崩了。自从用了Flex，我写布局的效率至少翻了一倍。今天咱们就先把容器属性吃透，这是Flex布局的根基。

4.1 flex-direction：主轴方向

这个属性决定了子元素是横着排还是竖着排。我刚开始学的时候总搞混主轴和交叉轴，后来记住一句话：flex-direction 控制的就是主轴方向。

属性值	效果	实际场景
row（默认）	水平从左到右	导航栏、按钮组
row-reverse	水平从右到左	右侧对齐的操作栏
column	垂直从上到下	表单、列表
column-reverse	垂直从下到上	聊天消息列表（最新在底部）

/* 水平排列，最常用 */
.container {
  display: flex;
  flex-direction: row;
}

/* 垂直排列，做表单时常用 */
.form-container {
  display: flex;
  flex-direction: column;
}

4.2 flex-wrap：换行控制

默认情况下，Flex项目会挤在一行里，哪怕内容被压缩得不成样子。我曾经就踩过这个坑——做卡片列表时，所有卡片挤成了一团，文字都叠在一起了。

.card-list {
  display: flex;
  flex-wrap: wrap;  /* 允许换行 */
  gap: 16px;        /* 项目间距，比margin好用多了 */
}

属性值	说明	避坑指南
nowrap（默认）	不换行，项目被压缩	内容过多时会溢出
wrap	换行，从上到下排列	记得配合 gap 使用
wrap-reverse	换行，从下到上排列	用得少，但做倒序布局时很香

4.3 justify-content：主轴对齐

这个属性控制的是项目在主轴上的分布方式。说白了就是「怎么分钱」——是大家挤在左边，还是均匀分摊。

.toolbar {
  display: flex;
  justify-content: space-between;  /* 两端对齐，中间自动留空 */
}

属性值	效果	适用场景
flex-start	左对齐（默认）	常规布局
flex-end	右对齐	操作按钮靠右
center	居中对齐	弹窗、提示信息
space-between	两端对齐，项目间间距相等	导航栏、标签页
space-around	每个项目两侧间距相等	卡片网格
space-evenly	所有间距完全相等	均匀分布的图标栏

4.4 align-items：交叉轴对齐

如果说 justify-content 管的是「横着怎么排」，那 align-items 管的就是「竖着怎么对齐」。这个属性在项目高度不一致时特别有用。

.avatar-group {
  display: flex;
  align-items: center;  /* 所有头像垂直居中 */
}

属性值	效果	实际案例
stretch（默认）	拉伸填满容器高度	等高列布局
flex-start	顶部对齐	文字标签
flex-end	底部对齐	底部固定信息
center	垂直居中	图标+文字组合
baseline	基线对齐	不同字号文字的排版

4.5 align-content：多行对齐

这个属性很多人会忽略，但它其实很重要。记住一句话：只有多行（即 flex-wrap: wrap 生效时），align-content 才有用。

.grid-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;  /* 多行之间均匀分布 */
}

属性值	效果	说明
stretch（默认）	拉伸行高填满容器	行与行之间没有空隙
flex-start	所有行靠顶部	内容少时顶部对齐
flex-end	所有行靠底部	内容少时底部对齐
center	所有行垂直居中	内容少时居中显示
space-between	行之间间距相等	首行贴顶，末行贴底
space-around	每行上下间距相等	所有行均匀分布

知识体系总览

下面这张图是我自己总结的Flex容器属性关系，你看一眼就能记住它们各自管什么：

好了，这五个容器属性就是Flex布局的「五虎上将」。你想想看，只要掌握了它们，大部分布局需求都能搞定。下一节咱们再聊项目属性，到时候配合起来用，效果会更惊艳。