css - 如何使用 flexbox 在子 div 之间使用固定间距制作网格？

Question

这个想法是不使用任何框架。
基本上我使用的是 . row将包含我的网格的类，它将是 flexbox .每个 child 都会有一个类(class)会说多少 width它将占据(类似于引导网格)，例如:

.col1: {width: 25%};  
.col2: {width: 50%};  
.col3: {width: 75%}; 
.col4: {width: 100%};  

如果我把 4 个 div 放在 class 中。 col1它们应该在同一行，因为它们会占用 25%容器( .row )，但如果我再放一个 div它会下降到另一行，因为它超过了 100%的容器。

|| col1 | col1 | col1 | col1 || //4 divs each div with 25% in the same .row.


|| col1 | col1 | col1 | col1 || //5 divs each div with 25% in the same .row.
|| col1 |                     | 


||        col3        | col1 || //2 divs 1 of 75% other of 25% .row.

  

问题是我的网格应该总是包含一个空格 每个元素之间 20px ，类似于下图:

如果我有 4 divs，我不知道如何在每个 div 之间放置一个空格并且仍然遵守上述规则与类(class) .col1它们必须在同一行(包括空格)。
如果我有一个带有 .col3 的 div另一个是 .col1它应该是:

我该怎么做？
我试过这个:( gap div 之间超过了 div's width 的百分比，这就是为什么在这个例子中 divs 不在同一行的原因，即使有 4 divs 应该占据 100 .row 的 %，因为每个人将拥有 width 的 25%。
)

html,body{
 padding:0px;
 margin:0px;
 box-sizing: border-box
}

.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{
 width:25%;
}
.col2{
 width:50%;
}
.col3{
 width:75%;
}
.col4{
 width:100%;
}

<div class="row">
  <div class="col1">col1</div>
  <div class="col1">col1</div>
  <div class="col1">col1</div>
  <div class="col1">col1</div>
</div>

怎么解决？或者有没有更好的方法来实现这一目标？
注意:第一个 div 的开头不需要空格的 .row ，也不在最后 div的 .row

Answer 1

您可能会使用 calc() :

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box
}

section {
  width: 100%;
  overflow: hidden;
  border: 1px solid red
}

.row {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 20px);
  margin-left: -10px;
}

.row div {
  border: 1px solid blue;
  background: yellow;
  font-size: 24px;
  text-align: center;
  height: 50px;
  margin: 0 auto;
}

.col1 {
  min-width: calc(25% - 20px);
}

.col2 {
  min-width: calc(50% - 20px);
}

.col3 {
  min-width: calc(75% - 20px);
}

.col4 {
  min-width: calc(100% - 20px);
}

<section>
  <div class="row">
    <div class="col1">col1</div>
    <div class="col1">col1</div>
    <div class="col1">col1</div>
    <div class="col1">col1</div>

    <div class="col1">col1</div>
    <div class="col2">col2</div>
    <div class="col1">col1</div>

    <div class="col1">col1</div>
    <div class="col3">col3</div>

    <div class="col4">col4</div>

  </div>
</section>