轩辕李的博客
轩辕李
2019-05-05
目录

CSS布局-Flexbox完全指南

Flexbox（弹性盒子布局）是现代CSS布局的核心技术，它提供了一种更加高效的方式来布局、对齐和分配容器内项目的空间。

本文将全面介绍Flexbox的概念、属性和实战应用，帮助你掌握这一强大的布局工具。

# 一、Flexbox 基础概念

# 1.1 什么是 Flexbox

Flexbox（Flexible Box Layout）是一维布局模型，专门用于在容器内排列项目，即使它们的大小未知或动态变化。

主要特点：

  • 一维布局（沿主轴或交叉轴）
  • 自动分配空间
  • 灵活的对齐方式
  • 响应式布局友好

# 1.2 核心术语

┌─────────────────────────────────────────────┐
│  Flex Container (flex容器)                  │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  │
│  │   Flex   │  │   Flex   │  │   Flex   │  │
│  │   Item   │  │   Item   │  │   Item   │  │  → 交叉轴 (Cross Axis)
│  └──────────┘  └──────────┘  └──────────┘  │
│  ←────────── 主轴 (Main Axis) ───────────→  │
└─────────────────────────────────────────────┘
  • Flex Container（容器）：设置了 display: flex 或 display: inline-flex 的元素
  • Flex Item（项目）：容器的直接子元素
  • Main Axis（主轴）：项目排列的主要方向
  • Cross Axis（交叉轴）：垂直于主轴的方向
  • Main Start/End：主轴的起点/终点
  • Cross Start/End：交叉轴的起点/终点

# 1.3 基本使用

.container {
  display: flex; /* 块级flex容器 */
}

.inline-container {
  display: inline-flex; /* 行内flex容器 */
}

# 二、容器属性

# 2.1 flex-direction (主轴方向)

决定主轴的方向，即项目的排列方向。

.container {
  flex-direction: row;            /* 默认值：水平从左到右 */
  flex-direction: row-reverse;    /* 水平从右到左 */
  flex-direction: column;         /* 垂直从上到下 */
  flex-direction: column-reverse; /* 垂直从下到上 */
}

# 2.2 flex-wrap (换行)

决定项目是否换行以及换行方式。

.container {
  flex-wrap: nowrap;       /* 默认值：不换行 */
  flex-wrap: wrap;         /* 换行，第一行在上方 */
  flex-wrap: wrap-reverse; /* 换行，第一行在下方 */
}

# 2.3 flex-flow (简写)

flex-direction 和 flex-wrap 的简写形式。

.container {
  /* flex-flow: <flex-direction> <flex-wrap> */
  flex-flow: row wrap;
  flex-flow: column nowrap;
  flex-flow: row-reverse wrap;
}

# 2.4 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;  /* 项目间间隔完全相等 */
}

# 2.5 align-items (交叉轴对齐)

定义项目在交叉轴上的对齐方式。

.container {
  align-items: stretch;     /* 默认值：拉伸填充 */
  align-items: flex-start;  /* 起点对齐 */
  align-items: flex-end;    /* 终点对齐 */
  align-items: center;      /* 居中对齐 */
  align-items: baseline;    /* 基线对齐 */
}

# 2.6 align-content (多行对齐)

定义多根轴线的对齐方式（只在多行时生效）。

.container {
  align-content: stretch;       /* 默认值：拉伸填充 */
  align-content: flex-start;    /* 起点对齐 */
  align-content: flex-end;      /* 终点对齐 */
  align-content: center;        /* 居中对齐 */
  align-content: space-between; /* 两端对齐 */
  align-content: space-around;  /* 间隔相等 */
  align-content: space-evenly;  /* 完全平分 */
}

# 2.7 gap (间距)

设置项目之间的间距（现代CSS）。

.container {
  gap: 20px;           /* 行列间距相同 */
  gap: 10px 20px;      /* 行间距 列间距 */
  row-gap: 10px;       /* 只设置行间距 */
  column-gap: 20px;    /* 只设置列间距 */
}

# 三、项目属性

# 3.1 order (排序)

定义项目的排列顺序，数值越小越靠前。

.item {
  order: 0;  /* 默认值 */
  order: 1;  /* 数值越小，排列越靠前 */
  order: -1; /* 可以为负数 */
}

# 3.2 flex-grow (放大比例)

定义项目的放大比例，决定如何分配剩余空间。

.item {
  flex-grow: 0; /* 默认值：不放大 */
  flex-grow: 1; /* 等比例放大 */
  flex-grow: 2; /* 放大比例为其他项目的2倍 */
}

# 3.3 flex-shrink (缩小比例)

定义项目的缩小比例，空间不足时如何缩小。

.item {
  flex-shrink: 1; /* 默认值：等比例缩小 */
  flex-shrink: 0; /* 不缩小 */
  flex-shrink: 2; /* 缩小比例为其他项目的2倍 */
}

# 3.4 flex-basis (基准大小)

定义项目在分配多余空间之前的基准大小。

.item {
  flex-basis: auto;   /* 默认值：项目本来大小 */
  flex-basis: 200px;  /* 固定像素值 */
  flex-basis: 30%;    /* 百分比 */
  flex-basis: 0;      /* 忽略项目本身大小 */
}

# 3.5 flex (简写)

flex-grow、flex-shrink 和 flex-basis 的简写。

.item {
  flex: 1;              /* 等价于 flex: 1 1 0% */
  flex: auto;           /* 等价于 flex: 1 1 auto */
  flex: none;           /* 等价于 flex: 0 0 auto */
  flex: 0 1 200px;      /* flex-grow flex-shrink flex-basis */
}

推荐使用简写：

/* 常用值 */
.item {
  flex: 1;     /* 平均分配空间 */
  flex: 0 0 auto; /* 固定大小，不放大不缩小 */
  flex: 1 0 auto; /* 可放大，不缩小 */
}

# 3.6 align-self (单独对齐)

允许单个项目有与其他项目不同的对齐方式。

.item {
  align-self: auto;       /* 默认值：继承父元素的align-items */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
}

# 四、实战案例

# 4.1 导航栏布局

# 4.2 卡片网格

# 4.3 圣杯布局

# 4.4 等高列布局

# 4.5 完美居中

# 4.6 响应式表单

# 五、常见布局模式

# 5.1 两列布局（侧边栏固定）

# 5.2 三列布局（两侧固定）

# 5.3 自适应网格

# 5.4 底部固定布局

# 5.5 粘性页脚

# 六、最佳实践

# 6.1 何时使用 Flexbox

✅ 适合使用 Flexbox：

  • 一维布局（行或列）
  • 导航栏、菜单
  • 表单布局
  • 卡片布局
  • 对齐和居中
  • 等高列

❌ 不适合使用 Flexbox：

  • 复杂的二维布局（使用 Grid）
  • 大型页面布局（使用 Grid）

# 6.2 常见技巧

/* 最后一个元素靠右 */
.container {
  display: flex;
}

.item:last-child {
  margin-left: auto;
}

/* 垂直水平完美居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 间距使用 gap 而非 margin */
.container {
  display: flex;
  gap: 20px; /* 推荐 */
}

/* 响应式换行 */
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px; /* 最小300px自动换行 */
}

# 6.3 性能优化

/* ✅ 推荐：使用 flex 简写 */
.item {
  flex: 1;
}

/* ❌ 不推荐：分开写 */
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

/* 避免过度嵌套 */
/* ❌ 不推荐 */
.container .row .col .item { }

/* ✅ 推荐 */
.item { }

# 6.4 可访问性

/* 注意：flex order 会影响屏幕阅读器 */
/* 确保视觉顺序和DOM顺序一致 */

/* 如果必须使用 order */
.item {
  order: 2;
}

/* 确保键盘导航仍然正常 */

# 6.5 常见问题解决

问题1：项目溢出容器

/* 解决方案 */
.container {
  min-width: 0; /* 重置最小宽度 */
}

.item {
  overflow: hidden; /* 或 overflow: auto */
}

问题2：项目不等宽

/* 解决方案 */
.item {
  flex: 1 1 0%; /* 而不是 flex: 1 1 auto */
}

问题3：垂直居中无效

/* 确保容器有高度 */
.container {
  display: flex;
  align-items: center;
  min-height: 300px; /* 必须有高度 */
}

# 七、浏览器兼容性

特性 Chrome Firefox Safari Edge IE
基础Flexbox ✅ 29+ ✅ 28+ ✅ 9+ ✅ 12+ ⚠️ 11 (部分)
gap ✅ 84+ ✅ 63+ ✅ 14.1+ ✅ 84+ ❌
flex简写 ✅ ✅ ✅ ✅ ⚠️ 11 (有bug)

兼容性注意事项：

  • IE10-11 需要 -ms- 前缀
  • IE11 的 flex-basis 有bug，避免使用 auto
  • 使用 Autoprefixer 自动添加前缀
  • gap 属性需要较新浏览器，旧浏览器用 margin
/* Autoprefixer 会自动添加前缀 */
.container {
  display: flex;
  /* 编译后会添加：
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  */
}

# 八、总结

Flexbox是现代CSS布局的核心工具，掌握以下要点：

  1. 核心概念：理解主轴、交叉轴、容器和项目
  2. 容器属性：flex-direction、justify-content、align-items 是最常用的
  3. 项目属性：flex 简写最实用，理解 flex-grow、flex-shrink、flex-basis
  4. 实战应用：导航栏、卡片网格、圣杯布局、完美居中
  5. 最佳实践：合理使用，注意性能和可访问性
  6. 兼容性：现代浏览器支持良好，注意IE11的bug

灵活运用Flexbox，能让你的布局代码更简洁、更优雅、更易维护！

祝你变得更强!

编辑 (opens new window)
#CSS
上次更新: 2025/11/20
CSS基础-背景、列表与表格样式
CSS布局-Grid网格布局

← CSS布局-Grid网格布局→

最近更新
01
AI编程时代的一些心得
09-11
02
Claude Code与Codex的协同工作
09-01
03
Claude Code 最佳实践（个人版）
08-01
更多文章>
Theme by Vdoing | Copyright © 2018-2025 京ICP备2021021832号-2 | MIT License