多列布局在不同屏幕尺寸下经常出现错位，主要是因为传统用浮动或固定宽度写列，屏幕变窄时列放不下就会折行或重叠。flex布局能让列根据容器自动分配宽度，从根本解决这类问题。
为什么多列布局会错位
常见的错位场景有这几种：
- 给每一列写了固定像素宽度，小屏总宽不够，后面的列被挤到下一行
- 用float布局，内容高度不一致时底部对不齐，看起来乱
- 用inline-block留了空格间隙，缩放后间隙变大导致列掉下来
这些写法都把列宽写死了，而设备宽度是变化的，所以必然错位。
flex如何实现自适应列宽
把容器变成弹性盒，子列用flex属性分配比例，浏览器会自动算每列实际宽度。
基础结构
<div class="row"> <div class="col">第一列</div> <div class="col">第二列</div> <div class="col">第三列</div> </div>
样式写法
.row {
display: flex;
/* 列总和超出也不换行，按需收缩 */
flex-wrap: nowrap;
}
.col {
/* 平均分配剩余空间，基础宽度0 */
flex: 1 1 0;
padding: 10px;
box-sizing: border-box;
}
/* 中间列占两倍宽度 */
.col:nth-child(2) {
flex: 2 1 0;
}
上面代码中，flex简写含义是flex: 放大比例 缩小比例 基础宽度，基础宽度为0让分配更均匀。
小屏幕自动变竖排
如果屏幕太窄，横排还是会挤，可以用媒体查询让容器换行或变纵向。
@media (max-width: 600px) {
.row {
flex-wrap: wrap;
}
.col {
/* 每行最少220px，不够就整列换下行 */
flex: 1 1 220px;
}
}
注意事项
| 问题 | 处理办法 |
|---|---|
| 列内容过长撑破布局 | 给.col加overflow:hidden与text-overflow:ellipsis |
| 旧浏览器不支持 | 加-webkit-flex兼容前缀，或给回退宽度 |
flex只是分配主轴空间，如果要做复杂网格，可配合grid布局使用。
用好flex的伸缩特性，多列布局就能在不同屏幕保持整齐，不用为每个断点手写列宽。