如何用flexbox实现无框架、固定列间距、列宽按比例分配的栅格？

问题本质 #

flex容器的gap属性会在子元素宽度之外额外新增间距，4个25%宽度的子元素总宽度已占满容器，叠加3个20px的gap后总宽度超出100%，导致换行。 #

方案一：calc() 动态计算列宽（保留gap属性） #

通过calc()函数在列宽中提前扣除分摊的gap宽度，确保总宽度+gap刚好等于容器宽度：

/* 全局统一设置盒模型，避免border/padding撑宽元素 */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.row{
  display:flex;
  flex-wrap:wrap;
  border:1px solid red;
  width:100%;
  gap: 20px;
}
.row div{
  border:1px solid blue;
  background:yellow;
  font-size:24px;
  text-align:center;
  height:100px;
}
.col1{
  /* 每行4个col1时总gap为3*20=60px，每个分摊15px */
  width: calc(25% - 15px);
}
.col2{
  /* 每行2个col2时总gap为1*20=20px，每个分摊10px */
  width: calc(50% - 10px);
}
.col3{
  /* col3+col1组合总gap为20px，col3分摊5px */
  width: calc(75% - 5px);
}
.col4{
  width:100%;
}

该方案代码简洁，不需要额外嵌套元素，符合预设的类名使用规则，col3+col1、4个col1的场景都能正常在一行展示，超出数量自动换行。 #

方案二：负margin+padding实现（兼容性最优） #

这是传统栅格系统通用的实现方案，兼容性可覆盖IE11，不需要计算列宽，规则更稳定：

实现思路 #

• 给.row设置左右负margin各10px，抵消最左、最右列的左右padding，实现两端无间距
• 给所有列设置左右padding各10px，间距由padding实现
• 列的背景、边框等样式放在列内部的容器中，避免被padding影响

代码示例 #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.row{
  display:flex;
  flex-wrap:wrap;
  border:1px solid red;
  width:100%;
  /* 负margin抵消首尾列的padding */
  margin-left: -10px;
  margin-right: -10px;
}
.col {
  /* 左右padding实现20px的列间距 */
  padding-left: 10px;
  padding-right: 10px;
}
.col-inner {
  border:1px solid blue;
  background:yellow;
  font-size:24px;
  text-align:center;
  height:100px;
}
.col1{
  width: 25%;
}
.col2{
  width: 50%;
}
.col3{
  width: 75%;
}
.col4{
  width:100%;
}

<div class="row">
  <div class="col col1">
    <div class="col-inner">col1</div>
  </div>
  <div class="col col1">
    <div class="col-inner">col1</div>
  </div>
  <div class="col col1">
    <div class="col-inner">col1</div>
  </div>
  <div class="col col1">
    <div class="col-inner">col1</div>
  </div>
  <!-- 第五个自动换行 -->
  <div class="col col1">
    <div class="col-inner">col1</div>
  </div>
  <!-- col3+col1组合正常一行展示 -->
  <div class="col col3">
    <div class="col-inner">col3</div>
  </div>
  <div class="col col1">
    <div class="col-inner">col1</div>
  </div>
</div>

方案对比 #

• calc+gap方案：代码更简洁，无需额外嵌套，适合不需要兼容低版本浏览器的场景
• 负margin方案：兼容性更强，列宽规则简单易维护，适合需要兼容旧浏览器的生产环境

内容的提问来源于stack exchange，提问作者yavgz