Flexbox 完全指南

Flexbox 是一维布局模型，解决了传统 CSS 布局中垂直居中、等高列、空间分配等难题。

核心概念

Flex Container（flex 容器）
  ├── Main Axis（主轴）→ 默认水平方向
  └── Cross Axis（交叉轴）→ 默认垂直方向

Flex Items（flex 子项）在主轴方向排列

容器属性

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

  /* 主轴方向 */
  flex-direction: row;            /* → 默认：水平从左到右 */
  flex-direction: row-reverse;    /* ← 水平从右到左 */
  flex-direction: column;         /* ↓ 垂直从上到下 */
  flex-direction: column-reverse; /* ↑ 垂直从下到上 */

  /* 换行 */
  flex-wrap: nowrap;   /* 默认：不换行（可能溢出）*/
  flex-wrap: wrap;     /* 换行 */
  flex-wrap: wrap-reverse; /* 反向换行 */

  /* 简写 */
  flex-flow: row wrap;

  /* 主轴对齐（justify-content）*/
  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）— 单行 */
  align-items: stretch;     /* 默认：拉伸填满 */
  align-items: flex-start;  /* 靠交叉轴起点 */
  align-items: flex-end;    /* 靠交叉轴终点 */
  align-items: center;      /* 居中 */
  align-items: baseline;    /* 基线对齐 */

  /* 多行对齐（align-content）— 多行时有效 */
  align-content: flex-start;
  align-content: center;
  align-content: space-between;
  align-content: stretch;  /* 默认 */

  /* 间距（现代写法）*/
  gap: 16px;          /* 行列间距相同 */
  gap: 16px 24px;     /* 行间距 列间距 */
  row-gap: 16px;
  column-gap: 24px;
}

子项属性

.item {
  /* 排列顺序（默认 0，越小越靠前）*/
  order: 0;
  order: -1;  /* 排到最前 */
  order: 1;   /* 排到最后 */

  /* 放大比例（默认 0：不放大）*/
  flex-grow: 0;   /* 不放大 */
  flex-grow: 1;   /* 按比例占用剩余空间 */

  /* 缩小比例（默认 1：等比缩小）*/
  flex-shrink: 1;  /* 默认：等比缩小 */
  flex-shrink: 0;  /* 不缩小（固定宽度）*/

  /* 基准尺寸（默认 auto）*/
  flex-basis: auto;   /* 使用 width/height */
  flex-basis: 200px;  /* 固定基准 */
  flex-basis: 0;      /* 从 0 开始分配 */

  /* 简写：flex: grow shrink basis */
  flex: 0 1 auto;  /* 默认 */
  flex: 1;         /* flex: 1 1 0 — 等分剩余空间 */
  flex: auto;      /* flex: 1 1 auto */
  flex: none;      /* flex: 0 0 auto — 固定尺寸 */

  /* 单独覆盖交叉轴对齐 */
  align-self: auto;       /* 继承容器的 align-items */
  align-self: flex-start;
  align-self: center;
  align-self: stretch;
}

常用布局模式

水平垂直居中

/* 最简单的居中方案 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

导航栏布局

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

.navbar .logo { flex: none; }           /* 固定宽度 */
.navbar .nav-links { flex: 1; }         /* 占满剩余空间 */
.navbar .actions { flex: none; }        /* 固定宽度 */

圣杯布局（三栏）

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar-left  { flex: 0 0 240px; }  /* 固定宽度 */
.main-content  { flex: 1; }          /* 自适应 */
.sidebar-right { flex: 0 0 200px; }  /* 固定宽度 */

卡片网格（自适应列数）

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

.card {
  flex: 1 1 280px;  /* 最小 280px，可放大 */
  max-width: calc(33.333% - 16px);  /* 最多三列 */
}

粘性底部

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

.header  { flex: none; }
.content { flex: 1; }   /* 撑满剩余空间 */
.footer  { flex: none; }

等高列

/* Flexbox 默认 align-items: stretch，子项自动等高 */
.columns {
  display: flex;
  gap: 24px;
}

.column {
  flex: 1;
  /* 无需设置高度，自动等高 */
}

实战：响应式卡片布局

.products {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.product-card {
  flex: 1 1 250px;  /* 最小 250px */
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.product-card .image { flex: none; }
.product-card .info  { flex: 1; }    /* 撑满，让按钮始终在底部 */
.product-card .actions { flex: none; margin-top: auto; }

Flexbox vs Grid

• Flexbox：一维布局（行或列），适合组件内部布局、导航栏、卡片内部
• Grid：二维布局（行和列），适合页面整体布局、复杂网格
• 两者可以嵌套使用：Grid 做页面布局，Flexbox 做组件内部