1. 还在用 float 做布局？先看看这些年你替它背的锅
做前端这么些年，我见过太多刚入行的同学一提到"布局"两个字，脑子里冒出来的第一反应就是float。甚至不少干了三五年的老手，写页面时仍然习惯性float: left一梭子，然后下一个 divclear: both补一刀。说句不好听的，咱 CSS 早就进化了，Flex 布局从 2009 年草案到现在已经稳定十几年了，你还在用 float 那套"打补丁式布局法"，不是技术不行，是思维惯性没换过来。
先说清楚一个事实：float 的本职工作根本不是布局。它最初的设计目的是文字环绕图片，就像报纸排版里图片嵌在文字中间那种效果。所有 float 布局的用法——左侧固定、右侧自适应、三栏、圣杯——全都是当年没有更好方案时"硬凑"出来的工作流。既然不是为布局设计的，用它做布局就注定要不停补漏洞。
我总结了一下，float 布局的核心痛点就三个：
- 高度塌陷：容器里的子元素全 float 之后，父容器的高度直接变成 0，你得用
clearfix清浮动，本质上是 hack。 - 源序依赖：想调整两列的顺序，要么改 HTML 结构，要么用负 margin 做"圣杯"那一套，代码恶心到不想维护。
- 对齐能力为零：垂直居中、均匀分布、自动占位这些需求，用 float 真要跪着写。
而Flex 布局（Flexible Box Layout）在 2012 年以后逐步标准化，它从设计之初就是为了解决一维分布对齐问题而生的。什么叫"弹性"？容器空间不够，子项能伸缩；空间多了，子项能伸展；想对齐，一个属性搞定。这才是布局该有的样子。
你可能会担心兼容性。放心，从 Chrome 21、Firefox 22、Safari 6.1 开始，Flex 布局的老语法和新语法都已经支持得相当完整。2024 年了，Flex 布局在现网环境里的可用性已经接近 100%，真的没必要再担心什么"IE 不支持"。就算某个老掉牙的项目非要兼容 IE10，也都是加个-ms-前缀或改几个属性名的问题，不算事。
所以这篇文章，我打算从零开始，把 Flex 布局的核心概念、容器属性、子项属性全部讲透，再给你几个实战高频场景和我在实际项目中踩过的坑。目标只有一个：让你看完直接能用，用上就回不去 float。
2. 上手前必须搞懂的五个核心概念
很多教程一上来就丢给你一堆属性，根本不解释"为什么这么设计"。结果你学完之后，看啥都能写，但一碰到实际页面还是懵。Flex 布局之所以学习曲线陡，是因为它有自己的"坐标系"和"角色划分"，先把这几个概念刻在脑子里，后面看属性就会觉得合情合理。
2.1 容器与项目：谁是爹谁是儿子
Flex 布局里有两个角色，flex container（弹性容器）和flex item（弹性项目）。简单地说，你给一个元素设置display: flex，这个元素就是容器，它的直接子元素全部自动变成"项目"。
这里要划重点：**只有直接子元素会被影响。**孙子元素不会自动变成 flex item，除非它的父级也单独设置 flex。很多新手在这里栽跟头，给容器设置了 flex，发现孙辈元素没有按预期排列，就开始怀疑属性写错了，其实是没搞明白作用范围。
<div class="container"> <div class="item">一级子项</div> <div class="wrapper"> <div class="item">二级子项，不受外层 flex 影响</div> </div> </div>当.container设置display: flex后，.item和.wrapper变成了水平的 flex item，但.wrapper内部的.item依然是普通块级元素。
2.2 主轴与交叉轴：Flex 布局的坐标系
这是 Flex 里最核心、也最容易混淆的概念。传统 CSS 布局是文档流思维——从左到右、从上到下。Flex 布局不一样，它有**主轴（main axis）和交叉轴（cross axis）**两根轴，默认情况下：
- 主轴是水平方向，起点在左，终点在右（就像
flex-direction: row）。 - 交叉轴是垂直方向，起点在上，终点在下。
为什么这根轴的概念这么重要？因为后面所有对齐属性，justify-content、align-items、align-self，它们的本质都是"在某根轴上怎么对齐"。你只有先搞清楚项目在主轴还是交叉轴上的行为，才能准确选属性。我见过太多人justify-content和align-items记混，就是因为没吃透"主轴管水平、交叉轴管垂直"这个默认认知。
最反直觉的地方在于：一旦你改了主轴方向，两根轴的对齐逻辑就会跟着换位。比如flex-direction: column时，主轴变成垂直方向，justify-content管的就是上下对齐，align-items管的反而是左右对齐。这个后面细讲。
2.3 父元素 display: flex 瞬间发生了什么
当你给一个容器写display: flex以后，哪怕你一个属性都还没加，子元素们也已经发生了三个隐式变化：
- 子元素的 display 计算值变成 block。
inline、inline-block这些都会变成块级盒，这是好事，缩进间隙问题直接消失。 - 子元素默认不换行，全挤在一行里，即使内容超出容器宽度。
- 子元素的 float、vertical-align 属性直接失效。如果项目里还残留着
float，Flex 会无视它，因为 Flex 容器里的 item 不具备浮动特性。
第一点对做导航栏特别有用。以前用float: left做横向导航，总得处理inline-block之间的 4px 空隙，实测下来 flex 一设置，那个"天上掉下来的间距"就没了，因为子项都变成了 block 盒。
我建议你在实际开发中，写 Flex 布局的第一步永远是先跑一遍默认效果。把子元素的背景色分开，看它们怎么排、怎么挤、怎么溢出，再去调属性。很多问题不是属性不对，是压根没想象到默认状态做了什么。
3. 容器上的六个属性：布局的骨架就靠它们
在容器上设置的属性，决定了子项们整体的排列框架。掌握这六个，绝大多数的"整体布局"需求都能解决。下面我把每个属性都过一遍，顺便说说在实际项目中我会怎么选。
3.1 flex-direction：主轴方向决定布局走向
flex-direction控制主轴的起点和终点，简单说就是"整排子项朝哪个方向排列"。它一共四个值：
| 取值 | 主轴方向 | 实际效果 |
|---|---|---|
row | 左 → 右 | 默认，横向排列 |
row-reverse | 右 → 左 | 横向但水平翻转，起点在右 |
column | 上 → 下 | 纵向排列 |
column-reverse | 下 → 上 | 纵向但垂直翻转，起点在下 |
实际开发里，row和column用得最多，*-reverse相对冷门。但有几种场景特别好用，比如列表的时间线布局——你想让最新一条出现在最上面，就把数据倒序排，或者干脆flex-direction: column-reverse，配合overflow还能做成"对话框式的聊天记录"效果，免去滚动条跑到下面的 JS 操作。
3.2 justify-content：主轴对齐的核心
justify-content管的是子项在主轴方向上的对齐和分布，这是 Flex 相对 float 最大的优势之一。你有五个主要值：
flex-start：靠主轴起点排（默认）。flex-end：靠主轴终点排。center：居中排。space-between：两端对齐，子项之间的间距相等。space-around：每个子项两侧的间距相等，所以两端只有半个间距大。space-evenly：所有间距完全相等，包括两端。
我自己的习惯是：能不用 margin 就不用 margin 去做等间距。比如一组操作按钮想均匀铺开，我直接justify-content: space-between，三个按钮就自动左、中、右分布。四个按钮就四等分，一行代码的事。你用 float 的话得算宽、加 margin、再清浮动，费时费力还容易出偏差。
还有个小细节：space-around和space-evenly初学者总会搞混。记住，space-around是"每个 item 四周平分空间"，所以最左和最右两侧留的是半个间距；space-evenly是"所有空白位置完全相等"，两端也是一个间距。想跟设计稿的"点击热区"严丝合缝时，这个区别直接决定你切图准不准。
3.3 align-items 与 align-content：垂直方向的两个层次
这两个属性名字很像，很多人以为差不多。我从菜鸟阶段走过来，也想当然地以为align-items: center就已经"垂直居中"了。直到某次在flex-wrap: wrap的多行场景里才明白它们完全不是一回事。
align-items管的是"单行内部"子项在交叉轴上的对齐方式，取值：
stretch（默认）：子项在交叉轴方向被拉伸填满。这就是为什么你给 flex 容器里的子项不写高度，它会自动拉高到跟最高的兄弟一样。很多人误打误撞用了这个特性，但不知道自己用的是默认值。flex-start/flex-end/center：分别对应交叉轴起点对齐、终点对齐、居中对齐。baseline：按子项第一行文字的基线对齐，在文字和图标混排时特别有用。
align-content管的是"多行整体"在交叉轴上的分布，仅在flex-wrap: wrap且出现换行时才生效。它拥有的值是flex-start、flex-end、center、space-between、space-around、stretch，语义和justify-content类似。单行情况下，align-content没有任何效果。
我建议你记一句话：align-items管单行内的个体，align-content管多行整体的行间距。实际做网格卡片墙时，想让每一行卡片之间的间距一致，就是用align-content: space-between而不是align-items。
3.4 flex-wrap：别让子项挤成一团
默认flex-wrap: nowrap，子项不会主动换行，哪怕宽度超出容器，它们也会被压缩（或者溢出）。这在很多场景下是灾难。比如你做一排带固定宽度的小标签，标签多得超出了容器宽度，默认配置下所有标签会挤成一团或者直接溢出父容器，很难看。
设置flex-wrap: wrap之后，子项在放不下时会自动换到下一行。这个属性和flex-basis（后面讲）搭配，是实现"自动换行等分布局"的关键组合。
要注意一个坑：flex-wrap: wrap之后，父容器的高度不再由"单行"决定，而是由所有行的总高度决定。如果父容器设了height，那么多行总高度超过父容器时，有overflow的设置就会出现滚动条；没有的话就会溢出。做移动端适配时我经常在这里栽跟头，后来养成了"列多必查 wrap、多行必查高度"的习惯。
3.5 gap：终于不用再写 margin 了
gap属性是后来新增到 Flex 布局里的，跟前端圈子热议的"CSS 间距革命"关系很大。它同时设置主轴和交叉轴的间距，写法：
.container { display: flex; flex-wrap: wrap; gap: 16px 24px; /* 行间距 16px，列间距 24px */ }在gap出现之前，我做卡片间距真的苦不堪言——要挨个给子项写margin-right、再写:last-child把最后一个的 margin 清掉，或者用负 margin 给父容器加"抵消"逻辑。有gap以后，直接设置容器间距，干净利落，子项不需要任何额外样式。它不受"最后一个元素多余 margin"问题的困扰，这是它比 margin 方案强得最明显的一点。
注意：
gap在 Chrome 84、Firefox 63、Safari 14.1 之后才完整支持。如果你的项目还需要兼容老 Edge 等较老环境，建议还是用 margin 方案过渡一下。不过现在看来，绝大多数项目都已经完全可用了。
4. 子项属性：flex 的三个数值到底怎么算
在 Flex 布局里，真正玄学的并不是容器属性，而是子项上flex-grow、flex-shrink、flex-basis这三兄弟。很多人把flex: 1当万能药，一写就完事，结果某天发现子项宽度不对，或者"还剩最后一点宽度"，完全不知道问题出在哪。这里我掰开揉碎讲。
4.1 flex-basis：先定"应该有多宽"
flex-basis决定了子项在主轴方向上的初始尺寸。它可以是具体的长度值，也可以是auto。默认值是auto，表示"我本来该多大就多大"。
举一个实际例子，你写：
.item { flex-basis: 200px; }那么在主轴方向（默认横向）上，这个子项初始宽度就是 200px。如果主轴是纵向，那flex-basis设的就是高度。很多人容易忽略这一点，以为flex-basis一定管宽度，其实是管主轴的"长度"。
这里有个关键区别：flex-basis和width同时存在时，优先看flex-basis。在 Flex 布局里，flex-basis: 200px且width: 100px时，最终初始主轴尺寸是 200px。这也是 float 迁移时常见的"怎么没生效"原因之一——你以为改了 width，其实被 flex-basis 压住了。
4.2 flex-grow：剩余空间怎么分
flex-grow的默认值是 0，意思是什么？意思是不会主动瓜分剩余空间。当容器里有剩余宽度，而多个子项都设置了flex-grow时，剩余空间会按数值比例分配。
这里举一个经典例子：
.item-a { flex-grow: 1; } .item-b { flex-grow: 2; }如果容器有 300px 的剩余空间，那么item-a分到 100px，item-b分到 200px。按比例分配，不是按"倍数直接换算成某个绝对宽度"。搞清楚这一点，你就不会再用"flex-grow 是宽度的多少倍"来理解它了。
什么叫"剩余空间"？就是容器总宽度减去所有子项flex-basis总和之后剩下的部分。如果剩余空间是负的，flex-grow不生效。
4.3 flex-shrink：空间不够怎么压缩
flex-shrink默认值是 1，表示空间不足时，子项默认允许被压缩。这就是为什么很多时候你设置了子项宽度 200px，但容器只有 150px，子项并不会溢出，而是被压缩到 150px。
flex-shrink为 0 时，子项拒绝压缩，宁可溢出也不缩小。这在导航栏里特别有用——你希望 logo 部分始终占 120px，永远不被压缩，那就设flex-shrink: 0。
压缩比例的算法比flex-grow复杂一些，它要结合每个子项的flex-basis和flex-shrink值计算"压缩权重"。不过实际开发中，你基本上不需要手算，记住"数值越大缩得越狠，设 0 就是不参与压缩"就够用了。
4.4 flex: 1 的隐藏含义与遗留的"最后一点宽度"问题
搜热词里有一条"css display: flex; 子级flex:1;为什么最后还剩一点宽度"，这个问题我太熟了。flex: 1实际上是三个值的简写：
flex: 1 1 0%;也就是flex-grow: 1; flex-shrink: 1; flex-basis: 0%。关键在于flex-basis: 0%，它的意思是初始主轴尺寸从 0 开始。既然初始宽度是 0，那么所有剩余空间就会按flex-grow的比例被瓜分，这时各个子项才能实现真正的"均匀分配剩余空间"。
那"为什么最后还剩一点宽度"是怎么回事？我给你还原一个典型场景：
<div style="display: flex; width: 500px;"> <div style="flex: 1;">A</div> <div style="flex: 1;">B</div> <div style="flex: 1;">C</div> </div>理论上三个子项应该刚好分满 500px。但如果你把子项里加上padding或border，而没打开box-sizing: border-box，这些额外的尺寸是在 content-box 基础上累加的。于是每个子项的实际宽度 =flex分得的宽度 + padding + border，三个加起来自然超过容器宽度。如果这时flex-shrink压得住，你可能看不出什么；压不住时，最后那个子项就会换行或者溢出，"还剩一点宽度"的假象就出现了。
实战建议：在全局样式里设置
* { box-sizing: border-box; }，能避免掉 Flex 布局里 90% 以上的宽度计算怪问题。
5. 六个高频实战布局：复制粘贴就能用
理论讲完，来点实际能用的。下面这六个布局是我在各类项目里反复用到的，基本上覆盖了日常开发 80% 的需求。
5.1 垂直水平居中：困扰 CSS 新手十年的"终极问题"
在 float 时代，垂直居中几乎要靠position: absolute+ 负 margin，还要知道元素宽高才能算，遭罪。用 Flex 后，就是两行：
.parent { display: flex; justify-content: center; align-items: center; }这已经能解决几乎所有单行居中场景。唯一要注意的是子项本身有align-self覆盖的情况，或者父容器高度为 0 导致"居中看不出来"。问"为什么 flex align center 还是会不对齐"的人，90% 是父容器没有高度，或者子项被align-self单独改了。排查的时候先确认父容器有没有撑起来。
5.2 两栏自适应布局
这是"左侧定宽、右侧自适应"的典型场景，很常见：
.layout { display: flex; } .sidebar { flex: 0 0 240px; /* 固定 240px，不伸缩 */ } .main { flex: 1; /* 占据剩余全部宽度 */ }flex: 0 0 240px是flex-grow: 0; flex-shrink: 0; flex-basis: 240px的简写，意思是：既不放大，也不缩小，基准宽度 240px。右侧用flex: 1吃满剩余空间。这样做比 float 写法好在哪？你不需要给父容器清浮动，左侧也不会掉下来。
5.3 三栏经典布局
圣杯布局在 float 时代算高难度动作，在 Flex 时代，只是加了一列：
.layout-3 { display: flex; } .left { flex: 0 0 200px; } .center { flex: 1; /* 中间自适应 */ } .right { flex: 0 0 200px; }对于"两侧定宽、中间自适应"这种需求，一行 flex 布局就够了。唯一要叮嘱的是，如果中间内容很长，最好让左侧和右侧也设置align-self: flex-start，避免两侧高度被拉伸到非常长。
5.4 等分布局
卡片、首屏推荐位、数据指标列，经常要求"每列等宽"。最简单的方式：
.row { display: flex; } .col { flex: 1; }flex: 1配合flex-basis: 0%，每一列都从 0 开始等比例分配剩余空间，宽度自然相等。想让它们之间有间距，就在容器上加gap: 16px，不用再为每个子项处理 margin 了。
5.5 自动换行的标签墙
移动端很多标签流、词云模块，希望一排排自动排列。这个时候flex-wrap: wrap加flex-basis就非常合适：
.tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { flex: 0 0 auto; padding: 4px 12px; }flex: 0 0 auto表示"不放大、不缩小、尺寸由内容决定"，这样标签会保持内容宽度，装不下就换行，非常自然。
5.6 底部固定页脚：sticky footer
经典问题是：内容不够高时，页脚也必须在页面底部。用 Flex 实现：
body { display: flex; flex-direction: column; min-height: 100vh; } .content { flex: 1; } .footer { /* 不需要额外 margin，flex: 1 会把内容撑开 */ }关键是给页面最外层容器设置min-height，然后让中间内容区flex: 1。内容不够多时，flex: 1会把它撑满剩余空间，把页脚挤到底部。这是我在做管理后台时最常用的布局套路，比 JS 里监听 resize 靠谱多了。
6. 从 float 迁移到 Flex 时，我遇到的几个坑
理论知识学得再溜，真到项目迁移时还是会遇到各种"古怪行为"。下面这几个坑是我踩过的，也几乎是每个迁移动手者都会碰到的问题。
6.1 align-items 设置了 center 为什么还是不对齐
这个我真的被问过太多次。最常见的原因有两个。
第一，父容器没有设置高度。垂直居中必须有一个"垂直方向可以居中的范围"，高度为 0 的容器里，align-items: center根本感觉不到效果。你要先确认父容器的高度不是靠子项撑起来的。如果是靠兄弟元素撑起来的，那一行子项可能都堆在顶部附近，视觉上不算整个页面居中。
第二，子项本身高度已经顶满。当子项高度等于父容器高度时，"居中"自然看不出来。这时候你想让它居中，反而应该给子项设置一个小于父容器的高度，或者把父容器的高度用在别的维度去布局。
还有一个容易忽略的：align-items的默认值是stretch。也就是说，你没设置时子项在交叉轴会被拉伸。如果是横向排列、想垂直居中，一定要显式写align-items: center，而不是想当然以为默认就是居中。这个坑往往在"高度不一样的兄弟元素"出现时暴露出来——比如其中一项有 padding，另一项没有，看起来就缺那么几像素没对齐。
6.2 flex 子项宽度超出容器的问题
很多人在flex-wrap: wrap时给子项设了flex-basis: 30%，结果发现一排放不下 3 个，或者第 3 个被挤到下一行。主要原因往往不是 flex 的问题，而是子项的 padding、border、margin 也被算进了实际宽度。
举个例子，子项flex-basis: 30%，再加上padding: 16px，打开浏览器开发者工具看，它的实际渲染宽度变成了30% + 16px * 2。两个子项之后再怎么算，都已经超过 100% 了。除非你全局开了box-sizing: border-box，否则多出来的部分根本不在你预期里。
其次是flex-shrink作怪。当一行多个子项的总flex-basis超过容器宽度时，子项会按flex-shrink被压缩。你如果不想让某个子项被压扁，就给它加flex-shrink: 0。比如"可拖拽的卡片列"里，通常会把宽度/高度写死，让别的子项去压缩。
6.3 旧项目批量迁移时的注意点
从 float 迁移到 Flex，并不是简单地把float: left改成display: flex就完事，你得检查几个隐蔽点：
- inline 元素可能悄然变成 block。之前靠
display: inline排列的小图标，换成 flex 容器后，它们的 display 计算值会变成 block，可能影响内部文本对齐。 - margin 处理方式变了。float 的老代码里经常靠
margin-left做间距，到 flex 里你再叠加gap，就容易出现双重间距。迁移时建议把子项的 margin 清掉，改用容器的gap。 vertical-align失效。Flex 项目上的vertical-align不再起作用，垂直对齐全交给align-items。float和 flex 混用会导致浮动失效。记住，flex item 上的 float 会被忽略，所以别想着"这里用 float 调整一下细节"。
我曾把一个后台项目的全部列表页从 float 切到 Flex，切完之后明显感觉重构完的样式比原来少了 40% 不止，而且后续加需求时改动成本降低了一个量级。
7. Flex 和 Grid：到底该选谁
写到这里，很多人会问："那 Grid 呢？是不是 Flex 已经过时，是 Grid 的天下了？" 我的回答很简单：两个不是替代关系，而是分工不同。
7.1 一维 vs 二维：用直觉判断
Flex 布局解决的是"一维"问题——要么一行，要么一列，主轴方向上的分配和对齐。Grid 布局解决的是"二维"问题——行和列同时控制，你可以在脑子里画一个表格矩阵，然后精确控制某个格子占据几行几列。
我的选型直觉是这样的：
- 遇到导航栏、按钮组、卡片列表、上下结构、单行收尾——先想 Flex。
- 遇到整个页面的骨架，比如顶部导航 + 左侧菜单 + 右侧内容区 + 底部栏这种"整体框架型"布局——考虑 Grid，因为它对区域的划分更直观。
当然实际项目里，两者常常混用：外层用 Grid 搭页面框架，内层每个区域再用 Flex 做排列对齐。这是最舒服的姿势。
7.2 一起用的姿势
我个人的习惯是"布局第一层交给 Grid，细节排列交给 Flex"。比如一个管理后台页面：
.dashboard { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; height: 100vh; }这个网格把页面划分成侧边栏、顶栏、内容区、底栏。然后在每个区域内，比如内容区里的一排筛选条件、表格上方的操作按钮，用 Flex 做"横向排列 + 自动对齐 + 均匀分布"。这样既利用了 Grid 强力划分的二维能力，又享受 Flex 在一维排列上的简洁直观。
如果你非要在"该用 Grid 的场景"里硬上 Flex，也不是不行，但通常要写很多
flex-basis计算才能让每一行、每一列都对得很齐，维护成本直线上升。反过来，在该用 Flex 的单行场景里去用 Grid，定义grid-template-columns反而啰嗦。两者互补才是正道。
回到开头说的 float，什么时候我还会用它？只有一种情况：文字环绕图形的效果，这才是 float 的本命场景。除此之外，列表、导航、卡片、分栏、居中——Flex 完胜。Flex 之后又有 Grid，Grid 之外还有 CSS Columns、容器查询，这套体系已经足够覆盖现代网页的绝大多数布局需求。而且说实话，接触了这些现代布局之后回头看 float 布局，那种清浮动、负 margin 的日子我真的不想再经历一遍了。
如果这篇文章能帮你少走一点弯路，那我在 flex 上踩过的那些坑也算值了。我自己实践下来最受用的一条经验是：布局之前先想清楚主轴是谁、交叉轴是谁、有几行、要伸缩还是固定，然后在纸上画一个最简单的坐标系，再去写代码。Flex 看似属性多，但一切都可以还原到一张轴图上。把这根轴想明白，flex 后面的所有属性都只是往上面填答案而已。
 的整体异或推导)
