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

Question

这个想法是不使用任何框架。

基本上我使用的是 . row将包含我的网格的类，它将是flexbox. 每个孩子都会有一个类来说明它将占用多少width（类似于引导网格），例如：

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

如果我在课堂上放 4 个 div。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的空间，如下图所示：

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

我该怎么做？

我试过这个：（gapdiv 之间的百分比超过了. )div's widthdivsdivs.rowwidth

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

标签： css

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>