CSS Flexbox 完全指南：每个属性及可视化示例

Flexbox 用简洁、可读的代码解决了最常见的 CSS 布局难题——居中、等高列和响应式导航。本指南涵盖了你需要的每个属性。

核心概念

Flexbox 基于容器/项目模型：

• flex 容器（父元素）控制布局方向和间距
• flex 项目（子元素）控制它们如何增长、收缩和对齐

.container {
  display: flex; /* 或 display: inline-flex */
}

容器属性

flex-direction — 主轴

.container {
  flex-direction: row;            /* → 默认：从左到右 */
  flex-direction: row-reverse;    /* ← 从右到左 */
  flex-direction: column;         /* ↓ 从上到下 */
  flex-direction: column-reverse; /* ↑ 从下到上 */
}

justify-content — 主轴对齐

.container {
  justify-content: flex-start;    /* [■■■        ] */
  justify-content: flex-end;      /* [        ■■■] */
  justify-content: center;        /* [    ■■■    ] */
  justify-content: space-between; /* [■    ■    ■] */
  justify-content: space-around;  /* [ ■  ■  ■  ] */
  justify-content: space-evenly;  /* [  ■  ■  ■ ] */
}

align-items — 交叉轴对齐

.container {
  align-items: stretch;    /* 默认：项目填满容器高度 */
  align-items: flex-start; /* 项目顶部对齐 */
  align-items: flex-end;   /* 项目底部对齐 */
  align-items: center;     /* 项目垂直居中 */
  align-items: baseline;   /* 项目按文本基线对齐 */
}

flex-wrap

.container {
  flex-wrap: nowrap;       /* 默认：单行，项目可能收缩 */
  flex-wrap: wrap;         /* 多行：项目换行到下一行 */
  flex-wrap: wrap-reverse; /* 多行：向上换行 */
}

gap（现代，推荐）

.container {
  gap: 16px;         /* 行和列间距 */
  row-gap: 16px;     /* 行间距 */
  column-gap: 24px;  /* 列间距 */
}

/* 旧方法（仍然有效，但不够简洁） */
.item + .item { margin-left: 16px; }

项目属性

flex-grow、flex-shrink、flex-basis

.item {
  flex-grow: 0;    /* 默认：不超出内容大小增长 */
  flex-shrink: 1;  /* 默认：必要时收缩 */
  flex-basis: auto; /* 默认：基于内容大小 */
}

/* 简写：flex: grow shrink basis */
.item { flex: 0 1 auto; }  /* 默认 */
.item { flex: 1; }          /* flex: 1 1 0 — 增长以填满可用空间 */
.item { flex: auto; }       /* flex: 1 1 auto — 基于内容大小增长 */
.item { flex: none; }       /* flex: 0 0 auto — 固定，无弹性 */

/* 实用：一个项目填满剩余空间 */
.sidebar { flex: 0 0 280px; }  /* 固定 280px */
.main    { flex: 1; }           /* 填满剩余 */

align-self — 单个项目覆盖

.container { align-items: flex-start; }

.special-item { align-self: flex-end; } /* 此项目底部对齐 */
.another-item { align-self: center; }   /* 此项目居中 */

order

/* 改变视觉顺序而不改变 HTML */
.first-visually  { order: -1; } /* 显示在最前面 */
.item            { order: 0; }  /* 默认 */
.last-visually   { order: 1; }  /* 显示在最后 */

常见实际模式

完美居中（Flexbox 经典优势）

/* 水平垂直居中任何内容 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 填满视口 */
}

导航栏

.navbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
}

.navbar-brand { font-size: 1.5rem; font-weight: bold; }

/* 将之后的所有内容推到右侧 */
.navbar-spacer { flex: 1; }

.navbar-links {
  display: flex;
  gap: 16px;
}

<nav class="navbar">
  <a class="navbar-brand">Logo</a>
  <div class="navbar-spacer"></div>
  <div class="navbar-links">
    <a>Home</a>
    <a>Docs</a>
    <a>Blog</a>
  </div>
  <button>Sign In</button>
</nav>

卡片网格（响应式）

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px; /* 增长、收缩、最小宽度 300px */
  max-width: calc(33.33% - 16px);
}

粘性页脚

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* 将页脚推到底部 */
}

footer {
  /* 位于底部 */
}

等高卡片

/* 一行中的卡片始终具有相同高度 */
.row {
  display: flex;
  align-items: stretch; /* 默认——拉伸所有子元素到最高 */
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-body { flex: 1; } /* body 填满可用空间 */
.card-footer { margin-top: auto; } /* footer 始终在底部 */

Flexbox vs Grid：快速决策

调试技巧

/* 临时：添加轮廓以查看 flex 项目 */
.container > * {
  outline: 2px solid red;
}

/* 在 DevTools 中：选择容器，勾选 "flex" 徽章 */
/* Firefox DevTools 拥有最佳的 flexbox 可视化 */

浏览器支持

Flexbox 在 2026 年拥有 99%+ 的浏览器支持。无需厂商前缀。

→ 使用 CSS 单位转换器 工具转换 CSS 单位。