本教程共 44 篇 · 第 31 篇 · 更新于 2026-07-29 · 约 12 分钟阅读

31. Flexbox 容器属性

本节目标：掌握 Flexbox 容器端的六个核心属性，理解主轴与交叉轴的方向关系，能够灵活控制子元素的排列、对齐与换行。

上一章我们了解了 Flexbox 的基本概念：设置 display: flex 后，父元素变成 flex 容器，子元素自动成为 flex 项目。本章聚焦容器本身的属性，它们决定项目如何排列、对齐和分配空间。

flex-direction：决定主轴方向

flex-direction 定义主轴的方向。主轴一旦确定，交叉轴自动垂直于它。

.container {
  display: flex;
  flex-direction: row; /* 默认值 */
}

四个取值：

值	主轴方向	排列效果
`row`	水平从左到右	默认，项目横向排列
`row-reverse`	水平从右到左	项目反向排列
`column`	垂直从上到下	项目纵向排列
`column-reverse`	垂直从下到上	项目反向纵向排列

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      width: 200px;
      gap: 8px;
    }
    .item {
      padding: 12px;
      background: #4A90D9;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
  </div>
</body>
</html>

记住：flex-direction 改的不是”对齐方式”，而是整个坐标系统。主轴变成垂直后，justify-content 控制的就变成了垂直方向。

flex-wrap：控制是否换行

默认情况下，flex 项目会挤在一行里，哪怕溢出容器也不换行。flex-wrap 可以改变这个行为。

.container {
  display: flex;
  flex-wrap: nowrap; /* 默认值 */
}

三个取值：

nowrap：不换行，项目会被压缩以塞进一行。
wrap：允许换行，溢出的项目移到下一行。
wrap-reverse：换行，但交叉轴方向反转。

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      width: 320px;
      gap: 8px;
      padding: 10px;
      background: #f0f0f0;
      border-radius: 6px;
    }
    .item {
      width: 100px;
      padding: 16px;
      background: #E67E22;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</body>
</html>

做响应式栅格时，

是核心。配合 flex-grow 或百分比宽度，项目会自动根据容器宽度换行。

flex-flow：direction 与 wrap 的简写

flex-flow 是 flex-direction 和 flex-wrap 的合并写法，顺序不限。

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

等价于：

.container {
  flex-direction: row;
  flex-wrap: wrap;
}

默认值是 row nowrap。只写一个值时，另一个取默认值。

justify-content：主轴对齐

justify-content 控制项目在主轴上的分布方式。这是最常用的容器属性之一。

.container {
  display: flex;
  justify-content: flex-start; /* 默认值 */
}

常用取值：

值	效果
`flex-start`	靠主轴起点，项目紧挨排列
`flex-end`	靠主轴终点，项目紧挨排列
`center`	居中排列
`space-between`	首尾贴边，中间等距
`space-around`	每个项目两侧间距相等（边缘间距是中间的一半）
`space-evenly`	所有间距完全相等

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      background: #f0f0f0;
      border-radius: 6px;
    }
    .item {
      padding: 12px 24px;
      background: #27AE60;
      color: white;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">首页</div>
    <div class="item">关于</div>
    <div class="item">联系</div>
  </div>
</body>
</html>

Note

和 space-evenly 容易混淆。前者两端留一半间距，后者两端不留特殊处理，所有间隔完全相等。

align-items：交叉轴对齐

align-items 控制项目在交叉轴上的对齐方式。默认值是 stretch，所以项目会自动拉伸填满容器高度。

.container {
  display: flex;
  align-items: stretch; /* 默认值 */
}

常用取值：

值	效果
`stretch`	拉伸填满交叉轴方向（默认）
`flex-start`	靠交叉轴起点
`flex-end`	靠交叉轴终点
`center`	交叉轴居中
`baseline`	按文字基线对齐

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      background: #f0f0f0;
      border-radius: 6px;
    }
    .item {
      padding: 16px 32px;
      background: #8E44AD;
      color: white;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">完美居中</div>
  </div>
</body>
</html>

Tip

+ align-items: center 是 Flexbox 最经典的居中组合。水平和垂直同时居中，一行代码搞定。

align-content：多行对齐

align-content 只在多行（flex-wrap: wrap 且发生换行）时生效。控制行与行之间的间距。

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch; /* 默认值 */
}

取值与 justify-content 类似：flex-start、flex-end、center、space-between、space-around、stretch。

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      width: 320px;
      height: 200px;
      padding: 10px;
      background: #f0f0f0;
      border-radius: 6px;
    }
    .item {
      width: 140px;
      padding: 16px;
      background: #D35400;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
  </div>
</body>
</html>

单行时

不生效。如果只有一行项目，用 align-items 控制交叉轴对齐。

容器属性速查表

属性	作用	默认值
`flex-direction`	主轴方向	`row`
`flex-wrap`	是否换行	`nowrap`
`flex-flow`	上面两个的简写	`row nowrap`
`justify-content`	主轴对齐	`flex-start`
`align-items`	交叉轴对齐（单行）	`stretch`
`align-content`	行间对齐（多行）	`stretch`

理解这些属性的关键，是时刻分清当前的主轴和交叉轴方向。flex-direction 一变，所有对齐属性的参考系都会跟着变。