前言
这种需求很常见，但网上的教程代码都太乱了。
本文实现了 display flex 弹性布局下，设置每行显示的个数，超出自动换行解决方案，
如下图所示，默认情况下是不会 “换行” 的，而设置之后却可以：
解决方案
您可以直接一键复制，写个 *.html 运行一下查看效果。
核心思路就是，“外层” 加入 flex-wrap: wrap，“内层” 设置宽度让其一行放不下（自动换行）。
<body>
<div class="content">
<div class="item">内容</div>
<div class="item">内容</div>
<div class="item">内容</div>
<div class="item">内容</div>
</div>
</body>
<style>
/* 外层 */
.content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;/* 只要您把这个属性去掉,就不会自动换行了*/
}
/* END */
/* 内层 */
.item {
width: 48%;
background: #c3c3c3;
margin-bottom: 20px;
}
/* END */
</style>
