前言：我也不懂为哪些按钮会自己跑到第二行

拉倒吧... 先说一句，写CSS的时候真实的很简单把脑子搞晕。尤其是在flex这种东西， 官方文档写得跟天书一样，我看了三遍还是懵逼。下面这篇文章就是我自己摸爬滚打的经验，不保证对全部人都管用但总比空白页强较大。

1、 先把容器整出来——别忘了加flex-wrap

.demo{
    display:flex;
    flex-wrap:wrap; /* 必须要要有，不然根本不会换行 */
    justify-content:flex-start;
}

如果你遗忘了flex-wrap:wrap按钮根本不会自动换行，那你就算用了min-width也没用——这是因为根本没有“换行”。所以第一步一定要检查当前这个属性，求锤得锤。。

2、 最常见的坑：min-width被其它属性盖掉了

很更多较小伙伴在给按钮设.btn{min-width:80px;}后还去写了.btn{flex-shrink:1;}或者直接用了width:auto;。这时候浏览器会把按钮压得比80像素还较窄，然后强较大制换行，反正吧…。

解决办法：

• .btn{min-width:80px;flex-shrink:0;}
• 或者干脆用flex-basis: .btn{flex:0 0 80px;}
• 别忘了在父容器上加align-content:flex-start;

3、 实战代码示例

    上面这段代码里我把全部按钮的min-width都设成了80像素，仅有例外的是第三个按钮故意放较大到120像素，演示一下不同较宽度的情况。如果你打开控制台改动一下.btn{min-width}, 立马能够看到效果。

4、再说说gap和margin

嚯... 注意！ 很更多人觉得只要把的较宽度弄良好就完事儿，其实不然。 如果父容器里用了gap:10px;, 那各个按钮之间更多出来的空间范围会占用额外较宽度， 引起整体较宽度较高于容器较宽度，从而触发换行。解决办法：

• - 把gap调较小：

  .demo{gap:4px;}

• - 或者改成负margin：

  .demo button{margin-right:-2px;}

• - 再不行就把容器较宽度扩较大一点儿。

5、 媒体平台查询——手机端必备

📞 在移动端屏幕较窄的时候，你有可能需要把按钮排成一列或两列，这时候就要配合媒 没准儿… 体平台查询来 .demo{flex-wrap}/.btn{min-width}.

@media {
   .demo{
       flex-direction:column;
       align-items:center;
   }
   .btn{
       min-width:auto; /* 让它随内容自适应环境 */
       width:100%;     /* 拉满父容器 */
   }
}

其实上面那段代码很笨拙，但够用了。别想太更多，一启动只要能让页面不乱掉，就算成功了一半。

常见错误合集

a. "我已经给按钮加了min-width，但是它还是会换行" 原因：遗忘给父容器加flex-wrap：wrap;,或者给加了#someId {width:auto!important;}之类的覆盖样式，害...。

b. "我用了white-space:no-wrap，却仍然被压缩" 原因：没有同时也设置flex-shrink:0;, 浏览器仍然会压缩元素以适配父容器，我服了。。

图啥呢？ d. "align-content不起作用" 原因：父容器较高度不是固定值，或者子项只有一行。于是看起来良好像没效果。

较小结 & 加点噪音 🎉

绝绝子！ * 先确定父容器是display:flex + flex-wrap:wrap;

* 给按钮设定min‑width或flex‑basis, 并且flex‑shrink:0;

* 注意 gap、 margin、padding 会作用于整体占位，必不可更少时调较小或改成负值。

* 响应式下用媒体平台查询沉重崭新定义方向和最较小较宽度。

PUA。 良好啦，这篇文章算是随手写完了。里面有点乱、有点废话、还有一些莫名其妙的emoji——这是因为我想让它看起来不像机器写的一样。希望较大家在实际项目里能更少踩几个坑，要是还有别的问题，欢迎留言探讨。祝编码愉迅速！🚀🚀🚀