7天吃透Flexbox核心用法：从主轴交叉轴到实战布局

前端萌新阶段最让人头疼的往往不是某个复杂的逻辑而是明明照着教程写了代码页面上元素却像故意跟你作对一样怎么调都不听话。左浮右浮、margin 负值、inline-block 之间的空白缝隙……这些传统排版方案不是不能用而是当布局结构一复杂光靠它们去“试”出正确效果效率实在太低。Flexbox 布局就是为解决这类问题而生的它是一套专门针对一维排版的方案能把“元素在容器里怎么摆”这件事从“猜”变成“算”。这篇文章不打算铺开讲所有细节只围绕 7 天能够落地这个目标把最核心的用法、背后的原理、能直接抄的实战代码梳理清楚。新手看完至少能做到拿到一个页面模块心里能立刻想出一个 flex 方案并且一遍写对。1. 先别急着写代码把 Flexbox 的“坐标系”想清楚1.1 主轴与交叉轴Flexbox 最核心的两个方向很多新人学 Flexbox第一个动作就是背属性结果背了一周写的时候还是乱。原因其实很简单没搞懂 Flexbox 的根本逻辑是“方向”而不是“位置”。传统块级布局里元素默认从上往下排宽度不够就换行这种排列由文档流决定。而 Flexbox 一上来就改变了一个底层假设容器内的一级子元素不再受块级或行内级的约束而是全部进入一条“弹性轨道”里排队。这条轨道有明确的方向我们叫它主轴main axis和主轴垂直的方向叫交叉轴cross axis。主轴方向由flex-direction决定共有四个值row主轴从左到右这是默认值。row-reverse主轴从右到左。column主轴从上到下。column-reverse主轴从下到上。交叉轴始终与主轴垂直。主轴是水平时交叉轴就是垂直主轴是垂直时交叉轴就是水平。搞清楚这一点你再看那些justify-content、align-items会发现它们没那么神秘它们只不过分别是“主轴方向上的对齐”和“交叉轴方向上的对齐”而已。提示我在带新人时通常会让他们把flex-direction当成一切分析的起点。拿到一个布局需求先别问“这个元素要左对齐还是右对齐”先问“这组元素我希望它们沿着哪个方向排”。方向定了后面八成属性怎么用就清楚了。1.2 两个轴的设置是整套体系的源头理解了轴的方向之后你可以把 Flexbox 里所有属性归入两个阵营管主轴的和管交叉轴的。这个分类动作本身就是最重要的学习捷径。管主轴的常见属性justify-content控制主轴方向上的排列和对齐。flex-grow/flex-shrink控制子项在主轴方向上的伸缩。flex-basis控制子项在主轴方向上的初始尺寸。管交叉轴的常见属性align-items控制所有子项在交叉轴方向上的对齐方式。align-self控制单个子项在交叉轴方向上的对齐方式。align-content控制多行情况下整行在交叉轴方向上的分布。我见过不少教程把justify-content解释成“水平居中”把align-items解释成“垂直居中”然后加一句“前提是默认方向”。这个说法虽然方便记忆但非常坑人。因为一旦你把flex-direction改成columnjustify-content就从控制水平变成控制垂直了。如果你脑子里只有“水平居中”这个错误锚点改方向之后必然懵。正确的理解方式是justify-content永远管主轴align-items永远管交叉轴。主轴的物理方向由flex-direction决定交叉轴跟着主轴走。这套理解一旦建立你就不需要去背任何“哪个属性管哪个方向”的口诀了。2. 容器上那 6 个属性逐一说人话2.1 display:flex 与 flex-directionFlexbox 的使用非常简单只要在容器元素上写display: flex;这个元素就成了 flex 容器它的所有一级子元素会自动变成 flex 子项。.container { display: flex; }就这么一行子元素原本的display值比如block还是inline-block就都不重要了。它们会被统一处理成块级盒子但排布方式完全由 flex 规则接管。flex-direction在上面讲方向时已经提过这里补充一个实操中常见的误区很多人以为row-reverse和row的区别只是“左右颠倒”其实它真正改变的是主轴的方向以及子项的起始位置。row-reverse会让第一个子项出现在容器最右侧方向从右往左排。类似地column-reverse会让第一项出现在底部。这个特性在做一些从右往左阅读习惯的界面或者需要“列表倒序展示”的场景里特别有用省去你倒腾数据顺序的麻烦。.container { display: flex; flex-direction: row-reverse; /* 第一个子项从右侧开始 */ }2.2 justify-content 与 align-items这两个属性是新手最先接触、也最容易弄混的。我们分两个层次来讲清楚。先看justify-content。它管的是主轴方向上的“剩余空间分配方式”。所谓剩余空间就是容器尺寸减去所有子项尺寸之和后剩下的部分。它有五个常用值flex-start所有子项排在主轴起点剩余空间在终点方向。这是默认值。flex-end所有子项排在主轴终点剩余空间在起点方向。center子项整体居中剩余空间平均分到两侧。space-between第一个子项贴起点最后一个贴终点中间子项之间的间距相等。space-around每个子项两侧都有相等的空间所以两端会出现“半个间距”的效果。space-evenly所有间距包括两端完全相等。space-between和space-around的区别在实际项目中肉眼可见。space-between常用于导航栏比如菜单项均匀分布且两端贴边space-around常用于按钮组让每个按钮之间有呼吸感。如果你想让间距完全一致包括首尾就用space-evenly虽然它兼容性稍微差一点但现代浏览器基本没有压力。再看align-items。它管的是交叉轴方向上子项在“单个行内”的对齐方式。常用值有stretch默认值子项在交叉轴方向填满整个容器高度前提是子项没有显式设置交叉轴方向的尺寸。flex-start子项顶部对齐。flex-end子项底部对齐。center子项垂直居中。baseline按子项第一行文字的基线对齐。stretch是一个很容易被忽略但非常实用的默认行为。比如一个高度为 200px 的容器里面放了三个没有设置高度的子项默认情况下它们都会被拉伸到 200px 高。很多新手以为这是 bug其实这是stretch在起作用。如果你不想让子项被拉高记得显式设置align-items为flex-start或center。来看一个实际例子。下面这段代码可以让一个 400x300 的容器里放三个子项水平垂直都居中.container { display: flex; justify-content: center; align-items: center; height: 300px; }这两个属性组合起来几乎可以覆盖所有“居中 分布”的需求。我的建议是把上面这五个justify-content值和四个align-items值都亲手在 CodePen 上试一遍每个值放两个不同尺寸的子项观察它们的排列变化。这个过程比看十篇教程都有用。2.3 flex-wrap 与 align-contentflex-wrap决定了当子项在主轴方向上放不下时是压缩还是换行。nowrap默认值所有子项挤在一行里放不下就压缩或者溢出。wrap放不下就换行产生多行。wrap-reverse换行但行从交叉轴的反方向开始排列。nowrap模式下子项被压缩的幅度受它们各自的flex-shrink影响默认都是 1也就是大家按比例一起缩。如果你设了flex-wrap: wrap子项就可以保留自己的尺寸换到下一行去。align-content只在这时候有用——当容器产生了多行以后。它管的是“整行”在交叉轴方向上的分布方式而不是单个子项的对齐。它的取值和justify-content很像也有flex-start、flex-end、center、space-between、space-around等。这句话一定要记住align-content作用于多行之间align-items作用于同一条行内的子项。两者效果很像但作用对象完全不同。一个常见的坑是容器设了align-items: center想实现子项整体垂直居中但如果子项换行多行这个属性只能让每一行内部各自居中无法让“所有行作为一个整体”居中。这时候要用align-content: center。.container { display: flex; flex-wrap: wrap; align-content: center; /* 多行作为一个整体垂直居中 */ }3. 子项那几个属性搞懂 flex 属性就够了3.1 flex-grow / flex-shrink / flex-basis容器上的属性决定了排列规则但子项之间怎么分配空间要靠子项自己的属性来定。这部分有两个需要彻底搞懂的东西flex-grow和flex-shrink、flex-basis。flex-basis是子项在主轴方向上的“初始尺寸”。你可以把它理解成主轴方向上的 width。主轴水平时它控制宽度主轴垂直时它控制高度。它的默认值是auto也就是子项本来内容的大小。设了具体的值比如200px那子项初始宽度就是 200px。flex-grow控制的是当所有子项的初始尺寸之和小于容器尺寸时剩余空间怎么分。默认是 0表示不分配剩余空间。如果设为 1则子项会瓜分剩余空间如果多个子项都设置了不同值会按比例分配。flex-shrink控制的是当所有子项的初始尺寸之和大于容器尺寸时差额怎么压缩。默认是 1表示空间不够时大家等比缩小。设为 0 则表示不缩小宁可溢出也不压缩。这三个属性单独说都不难难的是它们组合在一起时产生的效果。我们来看一个经典场景。3.2 flex 简写与实际项目中的比例分配在实际项目里你很少会单独写flex-grow或flex-shrink更常见的写法是用flex简写属性。它的标准语法是flex: flex-grow flex-shrink flex-basis;比如三栏布局左侧固定 200px右侧固定 200px中间占满剩余空间.left { flex: 0 0 200px; } .main { flex: 1 1 auto; } .right { flex: 0 0 200px; }这里flex: 0 0 200px表示不放大、不缩小、初始宽度 200px。flex: 1 1 auto表示可以放大、可以缩小、初始宽度为内容宽度但因为有flex-grow: 1它会抢占所有剩余空间。还有一种非常常用的写法flex: 1。它实际上是flex: 1 1 0%的缩写表示子项可以放大和缩小初始尺寸为 0也就是所有子项完全基于剩余空间来分配。两个flex: 1的子项宽度会完全一样。这里有个细节很容易踩坑如果你在子项上写了width: 200px然后又写了flex: 1那么flex-basis: 0%会覆盖width的作用。也就是说子项的实际宽度可能是根据剩余空间算出来的而不是你写死的 200px。遇到这种情况别懵先检查一下是不是flex-basis在起作用。注意flex默认值是0 1 auto就是“默认不放大、默认可缩小、初始尺寸按内容来”。这也是为什么一个 flex 容器空间不够时子项会自动压缩的原因。如果你想保持子项不被压缩至少要设flex-shrink: 0。3.3 align-self 与 order这两个属性不算核心但偶尔用起来很爽。align-self可以让单个子项在交叉轴方向上的对齐方式与容器设置的align-items不同。.item { align-self: flex-end; /* 这个子项单独底部对齐 */ }典型的场景是一个列表左侧有多个文本项右侧需要一个按钮单独底对齐。给按钮加align-self: flex-end就能做到不需要额外包一层容器。order属性控制子项在主轴方向上的排列顺序。默认都是 0数值越小越靠前。它允许你在不修改 HTML 结构的情况下改变视觉顺序这在移动端优先的响应式设计中特别有用。比如移动端让图片显示在标题下面但桌面端让图片显示在标题左边你可以通过给图片设置order: -1来实现。.image { order: -1; /* 图片排到前面 */ }注意order只影响视觉顺序不影响 DOM 顺序对无障碍和键盘操作仍然按 DOM 顺序走。这个特性在特定场景下是优点但在需要屏幕阅读器按视觉顺序读取时就需要注意了。4. 实战拆解三个最常见的布局场景4.1 场景一导航栏 内容区先从一个最简单的场景入手顶部导航栏左侧是 logo中间是菜单右侧是“登录”按钮。这种布局在传统方案里通常靠 float 处理麻烦点在于菜单要居中、右侧按钮要贴右还得考虑不同宽度的适配。用 Flexbox 就很干净。HTML 结构大致是这样header classnavbar div classlogoLogo/div nav classmenu a href#首页/a a href#产品/a a href#关于/a /nav div classlogin button登录/button /div /headerCSS 核心部分.navbar { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 60px; }这里的关键是justify-content: space-between它让 logo 贴左、登录按钮贴右菜单组自然居在中间。但你可能注意到了这种做法的菜单并不是严格意义上的“绝对居中”因为左右两侧的内容宽度不一定相等。如果想让菜单在页面正中需要用更精细的方案把 logo 和登录按钮都设为固定宽度然后让菜单用 flex-grow 占满剩余空间再内部居中。.logo { width: 100px; } .menu { flex: 1; display: flex; justify-content: center; } .login { width: 100px; text-align: right; }我看到很多实际项目就是这么处理的。外层 flex 负责三段式骨架内层display: flex负责菜单的居中分布。Flexbox 的“嵌套使用”思路在这里体现得很明显不要指望一组 flex 属性解决所有层级的问题。4.2 场景二卡片列表自适应换行第二个场景是商品卡片列表希望不同屏幕宽度下卡片自动换行并且每行卡片数量自适应。这种效果在过去需要媒体查询配合百分比计算页面稍微改点东西就要动好几处。用flex-wrap配合百分比宽度可以做得非常省心。.cards { display: flex; flex-wrap: wrap; gap: 16px; } .card { flex: 0 0 calc(25% - 12px); box-sizing: border-box; }.card的flex: 0 0 calc(25% - 12px)表示不放大、不缩小、初始宽度为四分之一减去一部分间距。gap: 16px是 Flexbox 后来新增的间距属性它比在子项上手动加 margin 更方便也不需要关心最后一行的多余间距问题。如果想让每行固定显示 3 个卡片而不是根据宽度浮动可以用flex: 1 1 300px让卡片在 300px 基础上伸缩空间足够时就 4 个一行不够时就 3 个、2 个一行。这种方式尤其适合商品列表、图片墙这类需要自适应展示的场景。实际操作时遇到过不少这样的坑gap在 Flexbox 里是row-gap和column-gap的简写但如果你在给旧版本浏览器做兼容可能需要退回到margin方案。另外box-sizing: border-box一定要记得设成全局的否则calc(25% - 12px)会把 padding 和 border 也算进宽度导致实际宽度超过容器最后换行错乱。4.3 场景三垂直水平居中网页开发里最经典的需求大概就是“把一个块在容器里垂直水平居中”。在没有 Flexbox 的时代这需要结合定位、负 margin、table-cell 等技巧麻烦且脆弱。用 Flexbox 三行代码搞定.center-container { display: flex; justify-content: center; align-items: center; height: 400px; }不管里面的内容是一个按钮、一张图片还是多行文本块都能稳稳居中。如果容器高度不确定或者需要兼容内容超高的情况建议把align-items: center换掉改用margin: auto方案.center-container { display: flex; } .center-item { margin: auto; }margin: auto在 flex 子项中的作用非常特殊它会在主轴方向上自动吸收剩余空间同时也在交叉轴方向上吸收双重作用下实现居中。而且相比align-items: center它还能避免内容超高溢出时顶部被裁剪的问题。这个技巧在移动端页面里很实用值得记下来。5. 常见问题速查表5.1 为什么不居中这个问题我几乎每周都会被问到而且十次里有八次是同一个原因容器没有设置高度。align-items: center只能基于容器的高度来做交叉轴方向的居中如果容器高度是auto它的高度等于内容高度自然没有“多余空间”可以分配子项看起来好像没居中实际上没有任何空间可居。解决思路很简单要么给容器设置一个明确的高度比如height: 100vh或者height: 400px要么让容器处于一个已知高度的外层容器里。如果你想让一个元素相对于整个页面垂直水平居中那它的外层容器必须至少占满视口高度.full-page { display: flex; justify-content: center; align-items: center; height: 100vh; }另外一个容易忽略的情况是flex-direction: column之后justify-content才负责垂直方向。如果你在默认row模式下想着用justify-content去做垂直居中那自然不会有效果。方向一变所有属性的作用方向都要跟着变。5.2 为什么 flex 布局的宽度不生效这个问题通常发生在两种情况。第一种是子项写了width: 200px但容器的flex-wrap: nowrap导致空间不够结果子项被压缩了表现上宽度并不是 200px。解决办法是给子项加flex-shrink: 0或者用flex: 0 0 200px明确告诉浏览器“我不缩”。第二种情况是flex-basis与width冲突。前面提过flex-basis: 0会覆盖width导致子项宽度看起来完全不受width控制。如果你确实想用width控制那flex-basis必须保持auto。.item { flex: 0 1 auto; width: 200px; }这样写的时候子项宽度由width决定但空间不足时仍然可以缩小。如果空间足够它就会保持 200px。如果你发现宽度不生效自查顺序应该是先看flex-wrap再看flex-shrink最后看flex-basis。这三个都能改变子项的视觉宽度而且它们的优先级很容易让人误会。5.3 常见问题对照表现象可能原因解决方式子项被压缩成一条线flex-wrap为 nowrap 且空间不足设置flex-wrap: wrap或给子项flex-shrink: 0元素没有垂直居中容器没有高度给容器设置高度如height: 100vh空间充足但子项没放大flex-grow为 0设置flex: 1或修改flex-grow子项宽度不受width控制flex-basis覆盖了width把flex-basis设为auto多行整体不垂直居中align-items控制的是行内对齐改用align-content: center子项顺序与 HTML 不符设置了order属性检查order值默认都为 0gap 间距无效浏览器版本过旧不支持用margin方案回退这张表是我在排查布局问题时最常用的一份自查清单。它的价值不在于答案本身而在于提醒你从哪个方向切入。6. 我的一点实操心得Flexbox 这个知识点你只要理解了“主轴和交叉轴”以及“剩余空间分配”这两件事剩下的就是大量的使用与调试。但有两个细节我始终觉得应该单独拿出来说。第一个是Flexbox 虽然很好用但它不是万能的。Grid 布局在处理二维布局时明显更合适比如整个页面的主体框架、行列交叉的表格型结构。Flexbox 更适合一维排列比如导航、按钮组、卡片行、表单一行里的标签和输入框。两者不是替代关系而是配合关系。我自己最常见的用法是外层页面框架用 Grid内部的局部模块用 Flexbox。这样各司其职代码结构也更清晰。第二个经验是调试 flex 布局时浏览器的开发者工具能帮上大忙。现代浏览器里选中一个 flex 容器元素面板上会直接显示主轴和交叉轴的箭头标识你还能在“布局”标签里看到 flex 子项的伸缩情况一步步修改属性值看到结果立刻反馈。我刚学 flex 的那几个月几乎全靠这个可视化能力来理解各种属性的作用比自己埋头推理高效得多。最后再分享一个小技巧当你拿不准一个 flex 属性会带来什么效果时直接在同一页面上同时写两个容器一个用目标属性一个用默认属性放两个不同尺寸的子项一对比就明白这个属性到底是怎么作用于空间的。这种“并排对比”法也可以用于对比space-between和space-around或者align-items: center与align-content: center眼见为实的效果比任何文档描述都直观。Flexbox 没那么玄乎它就是把排版这件事从“手工计算”变成了“声明规则”。只要掌握轴的思路和空间分配的逻辑再配上一套趁手的调试方法7 天足够让你成为团队里那个“布局问题找我就对了”的人。