A06 Flex 布局

摘要：Flex 用「主轴 + 交叉轴」两句话解释清楚：主轴决定排列方向，交叉轴决定对齐方向。容器上的三个属性负责分配与对齐，项目上的三个属性负责伸缩比例。掌握这两组之后，居中、两端对齐、均分三栏都能在三行内写完。
关键词：Flex，主轴，交叉轴，伸缩，gap

所属：frontend/css / A-入门 ｜ 上一篇：A05-文档流与display ｜ 下一篇：A07-Grid布局

1 引言

一维排列（一行或一列）用 Flex，二维排列用 Grid。多数界面是一维的：导航、按钮组、卡片内布局。

本文给出容器与项目两组属性，并附三个高频写法。范围见表 1-1。

项	本文覆盖	本文不覆盖
容器	flex-direction、justify-content、align-items、flex-wrap、gap	容器查询（C01）
项目	flex、flex-grow、flex-basis、order、align-self	子网格（C01）
场景	居中、两端对齐、均分、换行	复杂页面布局（A07）

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/flex.html	编码 UTF-8
浏览器	Chrome 130+，Layout 面板可用	能看到 flex 覆盖层
前置	A05	理解文档流

3 原理与实现

3.1 两条轴

容器一旦设为 flex，子元素沿主轴排列，交叉轴负责对齐，如图 3-1 所示。

flowchart LR
    C["display: flex"] --> M["主轴<br/>flex-direction 决定"]
    C --> X["交叉轴<br/>垂直于主轴"]
    M --> J["justify-content<br/>沿主轴分配"]
    X --> A["align-items<br/>沿交叉轴对齐"]
    M --> G["gap<br/>项目间距"]

图 3-1 容器上的两条轴与三个属性

图上可见：row 时主轴水平，column 时主轴垂直，justify-content 与 align-items 的作用方向随之交换。

3.2 三个高频写法

/* 运行环境：Chrome 130+；css-practice/flex.css */
.center { display: flex; align-items: center; justify-content: center; min-height: 8rem; }

.between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.equal > * { flex: 1 1 0; }

.wrap { display: flex; flex-wrap: wrap; gap: 0.75rem; }

<nav class="between">
  <a href="#">站点名</a>
  <div class="equal"><a href="#">首页</a><a href="#">文章</a><a href="#">关于</a></div>
</nav>

<div class="wrap">
  <span>标签一</span><span>标签二</span><span>标签三</span>
</div>

容器属性与用途见表 3-1。

属性	常用值	用途
flex-direction	row（默认）、column	决定主轴方向
justify-content	flex-start、center、space-between、space-around	主轴分配
align-items	stretch（默认）、center、flex-start	交叉轴对齐
flex-wrap	nowrap（默认）、wrap	是否换行
gap	长度值或百分比	项目间距，替代 margin

项目属性与用途见表 3-2。

属性	简写含义	说明
flex: 1 1 0	grow / shrink / basis	均分剩余空间，最常用
flex: 0 0 auto	不伸不缩	固定宽度项
align-self	单个项目的交叉轴对齐	覆盖容器设置
order	排序值	仅调整视觉顺序，不影响朗读顺序

4 验证与讨论

1. 打开页面，确认导航为两端对齐，三个链接均分。
2. 把 flex-wrap 从 wrap 改为 nowrap，观察标签被压缩而非换行。
3. 把 justify-content 改为 space-around，对比与 space-between 的差异。
4. 给某一项加 align-self: flex-end，观察它单独下沉。

检查项	预期结果	说明
均分	三项宽度相同	flex: 1 1 0
间距	项之间有固定间隔	gap 而非 margin
换行	窄屏下标签换行	flex-wrap: wrap
顺序	order 改变视觉顺序	朗读顺序不变

讨论与局限。 flex-basis: 0 与 auto 的差异会直接影响均分结果，前者忽略内容宽度。另 flex 项目默认 min-width: auto，内容过长时不会收缩到比内容更窄，需要显式 min-width: 0。

5 常见问题

现象	原因	处理
均分不均	未把 flex-basis 设为 0	用 flex: 1 1 0
长文本撑破容器	项目默认最小宽度为内容宽度	给项目加 min-width: 0
项目不换行	默认 nowrap	加 flex-wrap: wrap
间距用 margin 出现双倍	相邻项目外边距叠加	改用 gap
垂直居中不生效	容器高度由内容撑开，无剩余空间	给容器 min-height 或用 height

6 结论

序号	结论	依据
1	主轴决定排列，交叉轴决定对齐	图 3-1
2	间距优先用 gap，不用 margin	表 3-1
3	均分三件套是 flex: 1 1 0	表 3-2
4	长内容场景需补 min-width: 0	5 节常见问题

• 上一篇：A05-文档流与display
• 下一篇：A07-Grid布局
• 返回：A00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · Flexbox 基本概念，https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox（访问于 2026-10-31）
[2] CSS Flexible Box Layout Module Level 1，W3C，https://www.w3.org/TR/css-flexbox-1/（访问于 2026-10-31）