Flexbox 布局完全入门指南

1. 为什么需要 Flexbox？

它把一个容器变成“弹性盒子”，让里面的子元素能够灵活地伸缩、对齐和分配空间。 你只需要告诉管家“把东西放在中间”、“让它们均匀散开”，剩下的它会自动搞定。

2. 核心概念：主轴与交叉轴 🎯

这是理解所有属性的关键，我们用一个比喻。

想象你手里有一条 传送带（这就是“主轴” Main Axis），它有一个固定的运行方向。你可以把货物（子元素）一个个放在传送带上。同时，传送带本身有宽度，货物的摆放还可以在垂直于传送带的方向上对齐，这个垂直方向就是 交叉轴（Cross Axis）。

主轴方向：由 flex-direction 决定，货物是水平流动还是垂直流动。

交叉轴方向：始终与主轴垂直。

所有对齐属性，都是围绕这两个轴展开的。记住这张图的概念：

(主轴方向 → → →)[货1][货2][货3]... ← 这是默认水平主轴 ↑ 交叉轴方向（垂直对齐）

3. 五大核心属性逐个击破

我们先准备一个基础的 HTML 结构和 CSS，后面所有的演示都基于它修改。

<divclass="container"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div></div>

.container{display: flex;/* 开启弹性盒子管家模式 */ /* 下面我们将在这里添加各种属性 */ /* 为了演示效果，给容器一点高度和背景 */ height: 200px;background-color:#e8f0fe;margin-bottom: 20px;}.item{width: 80px;/* 为了看清每个项目，给个背景色和间距 */ background-color:#4a90e2;color: white;padding: 20px0;text-align: center;border-radius: 8px;}

3.1 flex-direction —— 传送带朝哪边走？

它决定主轴的方向，也就是货物摆放的流向。

row（默认）：主轴水平，从左到右。传送带水平向右移动。
row-reverse：主轴水平，从右到左。
column：主轴垂直，从上到下。
column-reverse：主轴垂直，从下到上。

.container{display: flex;flex-direction: row;/* 可以改成 row-reverse, column, column-reverse 试试 */}

效果描述（以 row 为例）： 三个小盒子在容器里从左往右排成一行，就像货物放在水平传送带上。
row（默认）：

column：
row-reverse：
column-reverse：

3.2 flex-wrap —— 货物太多时，换行还是挤一挤？

当货物总宽度超过传送带宽度时，flex-wrap 决定是否换行。

nowrap（默认）：不换行，所有项目硬挤在一行，可能会被压缩。
wrap：自动换行，放不下的项目会移到下一行，保持原本尺寸。
wrap-reverse：换行，但行的排列方向反转（第一行在下方）。

.container{display: flex;flex-wrap: wrap;/* 项目宽度若超过容器会自动折行 */ /* 为了让项目换行，我们可以多复制几个item，或者把容器宽度设小 */ width: 260px;}.item{width: 80px;/* 三个*80=240容器宽260，刚好一行。再加一个就会换行 */}

效果： 如果只有三个项目，它们舒舒服服在一行。但如果有五个项目，后两个会自动掉到第二行。
nowrap：

wrap：
wrap-reverse：

3.3 justify-content —— 如何在主轴上安排货物？

它定义项目在主轴上的对齐方式和间距分配。想象你是管理员，手里有一些空余空间，你决定如何把货物摆在传送带上。

flex-start（默认）：所有货物挤在起点。

flex-end：所有货物挤在终点。

center：所有货物居中聚集。

space-between：货物两端对齐，中间空间平均分配。第一个贴起点，最后一个贴终点。

space-around：每个货物两侧的间距相等。所以两个货物之间的空白是边缘空白的两倍。

space-evenly：所有间距完全相等，包括货物到边缘的距离。

.container{display: flex;justify-content: center;/* 切换不同值查看效果 */}

flex-start:[1][2][3](右边大量空白)center:[1][2][3](居中)flex-end:[1][2][3](靠右)space-between:[1][2][3](1贴左，3贴右，间距相等)space-around:[1][2][3](两边空白是中间空白的一半)space-evenly:[1][2][3](空白完全相等，1到左边缘间距=1到2的间距)

3.4 align-items —— 单行内，如何垂直摆放货物？

这个属性用来设置项目在交叉轴上的对齐方式，适用于所有项目在同一行（或一列）内的场景。

stretch（默认）：如果项目没设高度/宽度，会拉伸填满整个交叉轴。

flex-start：项目在交叉轴起点对齐。

flex-end：项目在交叉轴终点对齐。

center：项目在交叉轴居中。这就是传说中的“垂直居中”神器！

baseline：项目内文字的第一行基线对齐。

.container{display: flex;align-items: center;/* 垂直居中，也是最常用的值 */ height: 200px;/* 给容器一个高度，才能看出交叉轴对齐效果 */}

效果： 无论每个小盒子本身高度是否一致（比如文字多的盒子更高），它们都会在容器垂直方向正中间对齐。baseline 则让所有盒子的第一行文字底部线对齐，即使盒子高度不同。

3.5 align-content —— 多行货物，整体如何分布？

这是进阶但极易混淆的一点！ align-content 只有在多行（或多列）时才会生效，也就是必须配合 flex-wrap: wrap（或 wrap-reverse）且内容真的换成了多行。它控制的是多根主轴（多行）在交叉轴方向上的整体对齐和间距。

简单说：align-items 管同一行里每个货怎么摆，align-content 管行与行之间怎么摆。如果只有一行，align-content 设了也没用。

它的值很多和 justify-content 类似，但作用在交叉轴上：

stretch（默认）：每行拉伸，均匀填满交叉轴空间。

flex-start：所有行挤在交叉轴起点。

flex-end：挤在终点。

center：所有行整体居中。

space-between：第一行贴顶，最后一行贴底，中间行均匀分布。

space-around：每行上下间距相等，边缘空间是行间距的一半。

space-evenly：所有行间距完全相等，包括到顶和到底。

.container{display: flex;flex-wrap: wrap;/* 必须换行 */`.navbar{display: flex;/* 主轴上两端对齐，logo贴左，链接贴右 */ justify-content: space-between;/* 交叉轴垂直居中，让 logo 和菜单项高度不一也能对齐 */ align-items: center;background-color:#2c3e50;padding:020px;height: 60px;}.nav-links{display: flex;/* 菜单内部也用flex，让 li 水平排列 */ list-style: none;gap: 20px;/* 现代浏览器支持的间距属性，相当好用 */}.nav-links li{color: white;cursor: pointer;}.logo{color:#f1c40f;font-weight: bold;font-size:1.5em;}`align-content: center;/* 让多行在容器垂直方向居中 */ height: 300px;/* 足够高才能看出效果 */}.item{width:40%;/* 让一行放不下三个，强行换行，产生两行 */}

实战练习

<navclass="navbar"><divclass="logo">🌐 MySite</div><ulclass="nav-links"><li>首页</li><li>课程</li><li>关于</li></ul></nav>