做前端这些年，布局这块我踩过的坑比写过的组件还多。早些年用浮动加清除浮动那一套，页面稍微复杂一点就开始各种塌陷、错位，调一个三栏布局能耗掉半个下午。后来display: flex普及开来，我几乎是把手里所有老项目的布局代码都重写了一遍。弹性盒子布局不是什么新东西，但真正把它用透、用稳的人并不多，很多人停留在justify-content: center和align-items: center这两个属性上，遇到稍微绕一点的场景又开始堆margin和绝对定位。这篇内容我想从一个实际写页面的人的角度，把 flex 布局的核心机制、常见组合、踩坑经验完整梳理一遍，适合刚接触布局的新手，也适合用了很久但总觉得"差点意思"的中级开发者对照查漏。看完你至少能做到：拿到一个布局需求，脑子里能立刻反应出该用哪几个 flex 属性组合，而不是打开浏览器一边调一边猜。

1. 弹性盒子布局的整体设计与思路拆解

1.1 为什么是 flex，而不是继续用浮动或定位

要理解 flex 的价值，得先明白它解决的是什么问题。传统的块级布局是"文档流"思维，元素从上到下、从左到右依次排列，想让它们并排就得用float，想让它们垂直居中就得算高度或者用line-height硬凑。这套模型的问题在于：它描述的是"元素怎么流"，而不是"元素怎么排"。一旦容器尺寸变化、内容长度不定，浮动布局就会失控，你得写一堆清除浮动和媒体查询去兜底。

flex 换了个思路，它把容器变成一个"一维的排列空间"，子元素在这个空间里按照主轴和交叉轴两个方向被分配位置和尺寸。你告诉浏览器"我要横着排、两端对齐、剩余空间平分"，浏览器自己算。这个思维转变很关键：从"控制每个元素的位置"变成"声明整体的排列规则"。我个人的体会是，一旦你习惯了这种声明式思维，布局代码量能砍掉一半以上，而且响应式适配会自然很多。

具体来说，flex 相比浮动布局有几个实打实的优势。第一是垂直居中终于不用折腾了，align-items: center一行搞定，这在浮动时代是个经典难题。第二是剩余空间的分配是自动的，flex: 1让子元素自己瓜分空间，不用手动算百分比。第三是顺序可以脱离 DOM 结构，order属性让视觉顺序和源码顺序解耦，做移动端重排特别方便。第四是对齐方式极其丰富，主轴、交叉轴各自有独立的对齐控制，组合起来能覆盖绝大多数布局需求。

当然 flex 也不是万能的。它是一维布局，擅长处理一行或者一列内的排列，遇到真正的二维网格（比如整页的卡片矩阵，行和列都要严格对齐）时，grid会更合适。我的经验是：一行或一列内的分布用 flex，行列都要控制的用 grid，两者不是替代关系而是互补。很多页面其实是 flex 和 grid 混用的，外层大结构用 grid 划分区域，区域内部用 flex 排列细节。

1.2 主轴与交叉轴：理解 flex 的第一把钥匙

学 flex 卡住的第一个人，八成是没搞懂主轴和交叉轴。这两个概念是所有 flex 属性的坐标系基础，绕不过去。简单说，主轴（main axis）是子元素排列的方向，交叉轴（cross axis）是垂直于主轴的方向。默认情况下主轴是水平的（从左到右），交叉轴是垂直的（从上到下）。当你设置flex-direction: column之后，主轴变成垂直的，交叉轴变成水平的，所有跟主轴、交叉轴相关的属性行为都会跟着翻转。

这个翻转是很多人犯迷糊的根源。比如justify-content永远作用于主轴，align-items永远作用于交叉轴。在默认的row方向下，justify-content控制水平分布，align-items控制垂直对齐；一旦改成column，justify-content就变成控制垂直分布，align-items变成控制水平对齐。我见过不少人在column布局里写justify-content: center想水平居中，结果发现没反应，就是因为没意识到主轴已经转了。

用一个生活化的类比：把 flex 容器想象成一个书架，主轴就是你摆放书的那个方向（横着摆还是竖着摞），交叉轴就是书架的深度方向。justify-content决定书在排列方向上靠左、居中还是分散，align-items决定每本书在深度方向上贴着前板还是居中。这个类比我讲给不少新人听，基本一遍就能记住轴向关系。

提示：调试 flex 布局时，我习惯先在浏览器开发者工具里给容器临时加一个背景色，再给子元素加不同颜色的边框，这样主轴方向和空间分配一眼就能看出来，比盯着代码猜快得多。

1.3 容器属性与项目属性的分工

flex 的属性分成两类，这个分类意识建立起来之后，查文档和排错都会清晰很多。容器属性是写在父元素上的，控制整体的排列规则，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content这几个。项目属性是写在子元素上的，控制单个元素在规则内的表现，包括flex-grow、flex-shrink、flex-basis、flex、order、align-self这几个。

这个分工的意义在于：容器属性定"规矩"，项目属性做"例外"。比如容器统一设置了align-items: center，但某个子元素想顶部对齐，就在它自己身上写align-self: flex-start覆盖掉。这种"全局规则加局部例外"的模式，比每个元素单独定位要优雅得多，也是 flex 布局可维护性高的原因之一。

我在实际项目里有个习惯：容器属性尽量写在父级的一个类里，项目属性只在真正需要差异化的时候才写。这样布局逻辑集中，改起来不用满文件找。如果发现某个子元素的 flex 属性写得特别多，通常说明这个布局设计本身有问题，值得回头想想是不是该拆成嵌套的 flex 容器。

2. 核心属性细节解析与实操要点

2.1 flex-direction 与 flex-wrap：排列方向和换行控制

flex-direction有四个值：row（默认，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。日常用得最多的是row和column，反向排列在需要视觉顺序反转时偶尔用，但要注意它会同时翻转主轴起点，justify-content的flex-start和flex-end含义也跟着反了，容易出意外，我一般更倾向用order来控制顺序，语义更清晰。

flex-wrap控制是否换行，默认是nowrap，也就是所有子元素挤在一行里，空间不够就压缩。这个默认值是个大坑：很多人写了个横向列表，子元素一多就发现全被压扁了，就是因为没设flex-wrap: wrap。设成wrap之后，一行放不下就自动折到下一行，配合align-content可以控制多行之间的对齐。

这里有个细节值得说清楚：nowrap状态下子元素会被压缩，是因为flex-shrink默认值是 1。如果你不希望某个元素被压，得显式写flex-shrink: 0。这个组合在固定侧边栏加自适应主内容的布局里特别常用，侧边栏写flex-shrink: 0保证宽度不被吃掉，主内容写flex: 1占满剩余空间。

flex-flow是flex-direction和flex-wrap的简写，比如flex-flow: row wrap。我一般不太用这个简写，因为分开写可读性更好，团队里新人看flex-flow还得反应一下。简写适合那种属性组合固定、追求代码紧凑的场景，日常维护还是拆开写更稳妥。

2.2 justify-content：主轴上的空间分配

justify-content是使用频率最高的属性之一，它决定子元素在主轴方向上如何分配空间。取值有flex-start（默认，靠主轴起点）、flex-end（靠终点）、center（居中）、space-between（两端对齐，中间等距）、space-around（每个元素两侧等距）、space-evenly（所有间隙完全相等）。

这几个 space 系列的区别经常被搞混，我用一个具体的例子说清楚。假设容器宽 600px，里面三个 100px 的子元素，剩余空间 300px。space-between会把 300px 分成两个间隙，每个 150px，首尾元素贴边；space-around会把每个元素两侧各分一份，视觉上首尾元素外侧的间隙是中间间隙的一半；space-evenly则是所有间隙（包括首尾外侧）完全相等，每个间隙 75px。理解这个分配逻辑，选值的时候就不会犹豫了。

实际项目里space-between用得最多，导航栏左右分布、卡片列表两端对齐都是它。但有个坑要注意：space-between在只有一个子元素时，那个元素会贴左，因为两端对齐没有"另一端"可对。如果列表可能只有一个元素，又想让它居中，就得用space-around或者干脆判断数量切换样式。这个边界情况我在做动态列表时踩过，数据只有一条时布局突然歪了，排查半天才发现是这个原因。

2.3 align-items 与 align-self：交叉轴对齐的全局与局部

align-items作用于交叉轴，控制所有子元素在交叉轴上的对齐方式。取值有stretch（默认，拉伸填满）、flex-start、flex-end、center、baseline（按文字基线对齐）。默认的stretch意味着如果子元素没设交叉轴方向的高度，它会被拉伸到和容器一样高，这个行为在等高卡片布局里很好用，但也经常导致"我没设高度怎么元素变高了"的困惑。

baseline这个值在图文混排时特别有用。比如一行里既有大字号标题又有小字号说明文字，想让它们的文字底部对齐，用align-items: baseline比手动调margin精准得多。不过要注意baseline只对行内内容有意义，纯块级元素或者没有文字的元素用它效果不明显。

align-self是项目属性，用来覆盖容器上的align-items。典型场景是一个列表里大部分元素居中，但某个特殊元素要顶部对齐，就在它身上写align-self: flex-start。这个属性的价值在于它让"例外"变得局部化，不用为了一个元素改整个容器的规则。我个人的用法是：容器上设一个最通用的对齐方式，个别需要差异化的元素用align-self单独处理，这样布局意图最清晰。

2.4 flex 简写属性：grow、shrink、basis 三者的关系

flex简写是 flex 布局里最容易用错的地方，因为它背后是flex-grow、flex-shrink、flex-basis三个属性的组合。先分别说清楚这三个。

flex-grow定义剩余空间的放大比例，默认 0，也就是不参与剩余空间分配。设成 1 表示"有剩余空间就分我一份"，多个元素都设 1 就平分。如果 A 设 1、B 设 2，那剩余空间按 1:2 分给它们。flex-shrink定义空间不足时的收缩比例，默认 1，也就是允许被压缩，设 0 表示坚决不缩。flex-basis定义元素在分配空间前的初始尺寸，默认auto（也就是看元素自身的 width 或内容宽度），可以设具体像素值或百分比。

flex简写有几个常用值需要记牢。flex: 1等价于flex: 1 1 0%，意思是初始尺寸为 0、可放大可缩小，最终尺寸完全由剩余空间分配决定，这是做自适应等分最常用的写法。flex: auto等价于flex: 1 1 auto，初始尺寸看内容，然后参与剩余空间分配，适合内容宽度不定但想占满剩余空间的场景。flex: none等价于flex: 0 0 auto，尺寸完全由内容决定，不放大不缩小，适合固定尺寸的按钮或图标。

这里有个很多人不知道的细节：flex: 1里的 basis 是 0%，而flex: auto里的 basis 是 auto，这个差异会导致实际宽度不同。举个例子，两个子元素内容长度不同，都设flex: 1时它们最终宽度相等（因为 basis 都是 0，剩余空间平分）；都设flex: auto时，内容长的那个会更宽（因为 basis 是内容宽度，剩余空间在内容宽度基础上再分）。这个区别在做等宽布局和内容自适应布局时是决定性的，选错了就会出现"明明设了 flex 怎么宽度不一样"的问题。

注意：flex: 1和width: 100%完全不是一回事。前者是在 flex 容器内参与空间分配，后者是相对父容器宽度。在 flex 容器里给子元素写width: 100%往往会导致溢出，因为多个 100% 加起来超过容器宽度，正确做法是用flex: 1。

2.5 order 属性：视觉顺序与源码顺序的解耦

order控制子元素的排列顺序，默认值都是 0，数值越小越靠前。这个属性的价值在于它允许视觉顺序和 DOM 顺序不一致，做响应式重排时特别有用。比如移动端希望图片在上、文字在下，桌面端希望文字在左、图片在右，用order切换比改 DOM 结构或者写两套 HTML 要干净得多。

但order有个必须警惕的问题：它只改变视觉顺序，不改变 DOM 顺序，也不改变键盘 Tab 键的焦点顺序和无障碍阅读顺序。如果视觉顺序和 DOM 顺序差异过大，键盘用户和读屏用户会遇到焦点跳跃的困惑。我的原则是：order只用于小幅度的视觉微调，如果视觉顺序和逻辑顺序差异很大，宁可调整 DOM 结构，也不要滥用order。这是从可访问性角度必须守住的底线。

3. 实操过程与典型布局实现

3.1 水平垂直居中的三种写法与取舍

居中是最常见的需求，flex 提供了几种写法，各有适用场景。最经典的是容器上写display: flex; justify-content: center; align-items: center;，子元素自动在主轴和交叉轴都居中。这种写法适合容器尺寸已知、子元素尺寸不定的情况，代码最简洁。

第二种是给子元素写margin: auto。在 flex 容器里，子元素的margin: auto会吸收所有剩余空间，从而实现居中。这种写法的好处是可以在同一个容器里对不同子元素做不同的居中处理，比如一个子元素水平居中、另一个靠右，用 margin 分别控制比改容器属性灵活。不过要注意margin: auto在 flex 里的行为和普通块级布局不同，它确实能实现垂直居中，这是 flex 特有的能力。

第三种是用place-content: center，这是align-content和justify-content的简写组合。它适合多行内容整体居中的场景，单行内容用justify-content加align-items更直观。三种写法没有绝对优劣，我的选择习惯是：单一元素居中用第一种，多元素差异化居中用第二种，多行整体居中用第三种。

/* 写法一：容器控制，最常用 */ .center-box { display: flex; justify-content: center; align-items: center; min-height: 300px; } /* 写法二：子元素 margin auto，适合差异化 */ .center-box .item { margin: auto; } /* 写法三：多行整体居中 */ .center-box { display: flex; flex-wrap: wrap; place-content: center; }

3.2 经典三栏布局：固定侧边栏加自适应主内容

三栏布局是检验 flex 掌握程度的试金石。需求通常是：左侧固定宽度侧边栏、右侧自适应主内容，或者左右固定、中间自适应。用 flex 实现的核心是固定部分写flex: none或固定宽度加flex-shrink: 0，自适应部分写flex: 1。

先看左右两栏的情况。左侧侧边栏写width: 240px; flex-shrink: 0;，保证宽度固定且不被压缩；右侧主内容写flex: 1;，自动占满剩余空间。这里flex-shrink: 0是关键，如果不写，当主内容里有超宽元素时，浏览器会尝试压缩侧边栏，导致侧边栏变窄。我早期就吃过这个亏，侧边栏里放了个长表格，结果整个侧边栏被挤成一条缝。

三栏的情况稍微复杂一点，左右固定、中间自适应。写法是左栏flex: 0 0 200px，右栏flex: 0 0 200px，中间flex: 1。这里用flex: 0 0 200px而不是width: 200px，是因为简写同时锁定了放大、收缩和初始尺寸，语义更完整。中间栏的flex: 1让它吃掉所有剩余空间，无论容器多宽都能正确分配。

.layout { display: flex; min-height: 100vh; } .sidebar-left { flex: 0 0 200px; background: #f5f5f5; } .main-content { flex: 1; min-width: 0; /* 关键：防止内容撑破 */ padding: 24px; } .sidebar-right { flex: 0 0 200px; background: #f5f5f5; }

提示：中间自适应栏一定要加min-width: 0。flex 子元素的默认最小宽度是内容宽度，如果中间栏里有长文本或者宽表格，它会撑破容器导致布局溢出。加min-width: 0允许它收缩到比内容更窄，配合overflow: hidden或overflow: auto就能正确截断。这个坑我在做后台管理系统时踩过无数次，现在已经成为肌肉记忆。

3.3 导航栏布局：两端对齐加中间菜单

导航栏的典型结构是：左侧 Logo、中间菜单、右侧操作按钮，整体两端对齐。用 flex 实现，容器写display: flex; justify-content: space-between; align-items: center;，三个部分自然分布。如果中间菜单需要真正居中（不受左右宽度影响），就得用一点技巧：左右两部分设flex: 1，中间菜单设flex: none，这样左右等宽，中间自然居中。

这个"左右 flex: 1 加中间 flex: none"的模式我用了很多年，比绝对定位居中要稳，因为它不依赖具体宽度，左右内容变化时中间依然居中。缺点是左右两部分的内容会被拉伸到等宽，如果左侧 Logo 很窄、右侧按钮很多，视觉上会有点空，这时候可以在左右内部再用 flex 控制内容对齐。

导航栏还有个常见需求是菜单项之间的间距。用gap属性最方便，gap: 24px一行搞定，不用给每个菜单项写 margin 再处理首尾多余间距。gap在 flex 布局里支持得很好，现代浏览器都没问题，我现在的项目里基本用它替代了 margin 方案。如果非要兼容很老的浏览器，才退回用margin-right加:last-child清除的方案。

3.4 卡片列表的等高与自适应换行

卡片列表是 flex 的高频场景，需求通常是：一行放多个卡片、卡片等宽、自动换行、每行卡片等高。实现思路是容器写display: flex; flex-wrap: wrap; gap: 16px;，卡片写flex: 1 1 calc(33.333% - 16px);或者用flex-basis配合gap计算。

这里有个计算细节要说清楚。假设一行放三个卡片、间距 16px，那么每个卡片的宽度应该是(100% - 32px) / 3，也就是calc(33.333% - 10.67px)。但更简单的写法是给卡片设flex: 1 1 300px，让浏览器根据容器宽度自动决定一行放几个，300px是最小期望宽度，容器够宽就多放几个，不够就换行。这种写法不用精确计算，响应式效果自然，是我更推荐的方式。

等高的问题靠align-items: stretch（默认值）解决。因为 flex 子元素默认会拉伸到行高，同一行的卡片自然等高。但要注意，如果卡片内部内容高度不一，卡片本身等高但内容不会自动撑满，需要在卡片内部再用 flex 做纵向布局，让内容区域flex: 1撑开。这个嵌套结构是卡片布局的标准做法：外层横向 flex 控制排列，内层纵向 flex 控制内容分布。

.card-list { display: flex; flex-wrap: wrap; gap: 16px; } .card { flex: 1 1 300px; display: flex; flex-direction: column; border: 1px solid #e0e0e0; border-radius: 8px; } .card-body { flex: 1; /* 内容区撑开，保证底部按钮对齐 */ padding: 16px; } .card-footer { padding: 12px 16px; border-top: 1px solid #eee; }

3.5 表单行的标签与输入框对齐

表单布局里经常遇到标签宽度不一、输入框对不齐的问题。用 flex 可以很干净地解决：每一行写display: flex; align-items: center;，标签写固定宽度flex: 0 0 100px; text-align: right;，输入框写flex: 1;。这样所有输入框左边缘对齐，标签右对齐，视觉整齐。

如果标签文字长度差异很大，固定宽度可能导致短标签留白过多、长标签换行。这时候可以用min-width配合flex-shrink: 0，让标签至少有这么宽，内容长了自然撑开。但撑开会导致不同行的输入框起点不一致，所以更稳妥的做法还是统一固定宽度，超长标签用省略号或者换行处理。表单布局的核心是"对齐优先于紧凑"，宁可标签区域宽一点，也要保证输入框对齐。

多行表单还有个细节：行与行之间的间距用gap或者给每行写margin-bottom。用容器的gap更统一，但如果行内有特殊布局（比如某行需要额外说明文字），单独控制 margin 更灵活。我一般外层用gap控制基础间距，特殊行单独覆盖。

4. 常见问题与排查技巧实录

4.1 flex 布局失效的几种典型原因

写了display: flex却没生效，是新手最常遇到的问题。排查下来无非几种原因。第一是属性写错了元素，flex 要写在父容器上，不是子元素上，这个低级错误我见过不少。第二是被其他样式覆盖，比如某个类里写了display: block且优先级更高，用开发者工具看计算样式就能发现。第三是拼写错误，dispaly、flex-diretion这类手滑，编辑器的拼写检查能帮忙抓一部分。

还有一种隐蔽的情况是父元素本身没有宽度或高度。flex 容器需要有确定的尺寸才能分配空间，如果父元素是display: inline或者高度塌陷，flex 的表现会不符合预期。排查时先确认容器的实际尺寸，再看子元素的尺寸，一层层往上找，基本都能定位。

4.2 子元素被压缩或撑破的排查思路

子元素被压缩通常是因为flex-shrink默认是 1，空间不够时浏览器会压缩所有可压缩的元素。解决办法是给不想被压缩的元素写flex-shrink: 0。但要注意，如果所有元素都设flex-shrink: 0，空间不够时就会溢出容器，所以得配合overflow或者flex-wrap处理。

子元素撑破容器则是另一个方向的问题。flex 子元素的min-width默认是auto，也就是不小于内容宽度，长文本、宽图片、长单词都会把容器撑破。解决办法是给子元素加min-width: 0（横向布局）或min-height: 0（纵向布局），允许它收缩到比内容更窄，再配合overflow: hidden或text-overflow: ellipsis处理溢出内容。这个min-width: 0是 flex 布局里最重要的"补丁"之一，我几乎在每个自适应容器上都会加。

4.3 换行后对齐错乱的解决

flex-wrap: wrap之后，如果最后一行元素数量不满，justify-content: space-between会导致最后一行的元素被拉到两端，视觉上很别扭。这是space-between的固有行为，不是 bug。解决办法有几种：一是改用flex-start加gap，让元素自然靠左排列，间距统一；二是用 grid 布局替代，grid 的列对齐更可控；三是给最后一行补占位元素，但这种方法维护成本高，不推荐。

我现在的做法基本是用gap加flex-start替代space-between，因为gap的间距是固定的，不会因为元素数量变化而拉伸，视觉更稳定。只有在确实需要两端对齐且元素数量固定的场景（比如导航栏），才用space-between。这个选择让我的布局代码少了很多边界情况的处理。

4.4 嵌套 flex 容器的注意事项

嵌套 flex 很常见，外层控制大结构，内层控制细节。嵌套时要注意两点：一是内层容器的尺寸受外层分配影响，如果外层给的空间不够，内层再怎么设置也展不开；二是内层的 flex 属性只对内层的子元素生效，不会影响外层。排查嵌套问题时，要一层层确认每层的容器尺寸和分配规则，不能跳层看。

还有个容易忽略的点是嵌套容器的min-width和min-height。每一层自适应容器都可能需要min-width: 0，因为撑破问题会在每一层独立发生。我见过一个三层嵌套的布局，最内层的长文本把整个页面撑出横向滚动条，排查发现是中间层没加min-width: 0。所以嵌套布局时，每一层的自适应容器都要检查这个属性。

注意：嵌套 flex 时尽量避免过深层级。三层以上的 flex 嵌套通常意味着布局设计可以简化，过深的嵌套会让样式难以维护，也容易出各种尺寸问题。能用一层解决的不要用两层，能拆成独立组件的就拆出去。

4.5 移动端适配中的 flex 实践

移动端布局用 flex 特别顺手，因为屏幕宽度不定，自适应需求多。常见的底部导航栏、顶部标题栏、列表项都是 flex 的典型场景。底部导航用display: flex; justify-content: space-around;让图标均匀分布，顶部标题栏用space-between让返回按钮和操作按钮分居两端。

移动端有个特殊问题是软键盘弹出时布局被压缩。如果页面用了height: 100vh的 flex 布局，键盘弹出后视口高度变化，布局会跟着压缩甚至错乱。解决办法是用min-height: 100vh而不是height，或者用100dvh（动态视口高度）适配移动端。这个细节在做移动端表单页时特别重要，我踩过一次，输入框聚焦后整个页面被挤变形，后来统一改用min-height才解决。

另外移动端的点击区域要足够大，flex 布局里用gap控制间距时，要确保每个可点击元素的尺寸不小于 44px（这是通行的最小触控尺寸参考）。纯视觉上紧凑的布局，在移动端可能点不准，这个平衡要在设计阶段就考虑进去。

5. 我个人的几条实战心得

用了这么多年 flex，有几个习惯已经固化下来了，分享出来供参考。第一，布局容器统一加box-sizing: border-box，避免 padding 和 border 撑破宽度计算，这个几乎是现代布局的标配，配合 flex 使用能省掉大量尺寸调试。第二，优先用gap而不是 margin 控制间距，gap不会产生首尾多余间距，也不用处理:last-child，代码更干净。

第三，自适应容器必加min-width: 0，这条前面反复提过，但值得再强调一次，它是 flex 布局里最高频的"隐形 bug"来源。第四，能用flex: 1就不用width: 100%，前者参与空间分配，后者容易溢出。第五，调试时先看轴向再看对齐，大部分 flex 问题都是轴向理解错了，确认flex-direction之后再调justify-content和align-items，效率会高很多。

最后说一个我最近才想明白的点：flex 布局的代码质量，很大程度上取决于容器和项目的职责划分是否清晰。如果一个容器上堆了五六个属性、子元素上又各写一堆覆盖，说明布局设计本身没想清楚。好的 flex 布局应该是容器定规则、项目做微调，读代码的人一眼能看出布局意图。这个标准比记住多少属性值更重要，也是我从"会用 flex"到"用好 flex"的分水岭。