你用 CSS 做布局的时候，是不是也有过这种抓狂时刻？想让几个按钮并排对齐，写了半天代码要么挤成一团，要么一个飘在上面一个掉在下面；或者明明加了 flex 属性，子元素却纹丝不动，对着屏幕反复检查语法，最后发现 “哦，父容器忘了加 display: flex”—— 这些 Flex 布局的坑，真的能把新手折腾到怀疑人生，对吧？

其实 Flex 布局看着简单，但新手很容易在基础设置上出错。最常见的第一个坑，就是 “只给子元素加 Flex 属性，父容器啥都不设”。比如你想让三个 div 横向排列，直接给每个 div 加 flex: 1，结果发现它们还是垂直堆叠的。这时候别纳闷，问题出在父容器上 ——Flex 布局的核心是 “父容器控制子元素”，父容器没开启 Flex 模式（也就是没加 display: flex），子元素的 Flex 属性根本不会生效。就像你想让队员排队，得先划定排队的区域，队员才知道该往哪儿站，不然大家只能随便乱站。

解决方法特别简单，给父容器加上 display: flex 就行。比如这样写：.parent {display: flex;} .child { flex: 1; } 这样三个 child 就会平分父容器的宽度，横向整齐排列。小索奇见过很多新手卡在这里，明明子元素属性写得没问题，就是没给父容器开 Flex，白浪费半天时间。

第二个容易踩的坑，是 “没设置 flex-wrap 导致子元素溢出”。比如你在父容器里放了 5 个子元素，每个子元素宽度设为 200px，父容器宽度只有 800px。这时候如果没加 flex-wrap: wrap，子元素不会自动换行，只会挤在一起，甚至超出父容器的范围，看起来乱糟糟的。这是因为 Flex 布局默认是 “不换行”（flex-wrap: nowrap），不管子元素总宽度超不超，都硬塞在一行里。

遇到这种情况，只要给父容器加个 flex-wrap: wrap 就行。比如导航栏里的菜单项比较多，屏幕变窄时就会自动换行，不会溢出到页面外面。你可以试试，把父容器的代码改成.parent {display: flex; flex-wrap: wrap;}，再缩小浏览器窗口，看看子元素是不是会自动换行排列 —— 是不是瞬间清爽多了？

还有个新手常搞混的坑，就是 “把 align-items 和 justify-content 弄反”。很多人想让子元素垂直居中，随手写了 justify-content: center，结果发现没效果；或者想让子元素水平均匀分布，用了 align-items: space-between，同样没反应。这背后的原因，其实是没搞懂 Flex 布局的 “主轴” 和 “交叉轴”。

简单说，主轴是 Flex 布局的主要排列方向，由 flex-direction 决定：如果 flex-direction 是 row（默认），主轴就是水平方向；如果是 column，主轴就是垂直方向。而交叉轴是和主轴垂直的方向。justify-content 控制的是子元素在 “主轴” 上的对齐方式，align-items 控制的是子元素在 “交叉轴” 上的对齐方式。比如你想让子元素垂直居中，当 flex-direction: row 时，应该用 align-items: center（交叉轴是垂直方向）；要是用了 justify-content: center，只会让子元素在水平方向居中，垂直方向还是没变化。小索奇认为，新手不用死记硬背太多属性，先把 “主轴对应 justify-content，交叉轴对应 align-items” 这个逻辑吃透，再练几个例子，很快就能分清。

说到这儿可能有人会问：“除了这些，Flex 布局还有没有其他容易踩的坑？” 其实对新手来说，先把这三个基础坑避开，大部分简单布局都能搞定。比如做卡片列表、导航栏、表单按钮组，只要记住 “先开父容器 Flex，按需加换行，分清主轴交叉轴”，基本不会出大问题。等这些用熟了，再去学 align-content、flex-shrink 这些更复杂的属性也不迟。

你之前用 Flex 布局的时候，是不是也把 align-items 和 justify-content 弄混过？或者遇到过子元素溢出不知道怎么解决？评论区说说你的经历，咱们一起把这些布局坑变成 “加分项”～

我是【即兴小索奇】，点击关注，后台回复 领取，获取更多相关资源