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

【问题标题】：how can I make a grid using flexbox with a fixed spacing between child divs?如何使用子 div 之间固定间距的 flexbox 制作网格？
【发布时间】：2021-10-02 17:06:34
【问题描述】：

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

基本上我正在使用一个 .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 它们必须在同一行（包括空格）。如果我有一个带有.col3 的div 和另一个带有.col1 的div，它应该是：

我该怎么做？

我试过这个：（div之间的gap超过了div's width的百分比，这就是为什么这个例子中的divs不在同一行，即使有4个divs应该占据 .row 的 100%，因为每个人将拥有 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>

如何解决？还是有更好的方法来实现这一点？

注意：.row 的第一个 div 的开头不需要空格，.row 的最后一个 div 的结尾也不需要空格

【问题讨论】：

您可能正在寻找grid-gap: xpx
@RizaKhan 我尝试了 gap，但它对我没有用，或者我不知道我做错了什么。

标签： css

【解决方案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>

【讨论】：

谢谢！你为什么用min-width而不是width？
为什么在.row 宽度中添加20px？为什么margin-left:-10px;
最后一个div的末尾有一个空格:(
@yavgz，是的，左右两边都有10px的边距，不过隐藏起来很方便。
如何删除第一个和最后一个空格？

【解决方案2】：

我认为您应该再添加一个子标签来包含 col 的内容。

        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; */
            font-size: 24px;
            text-align: center;
            height: 100px;
        }

        .col1 {
            width: 25%;
        }

        .col2 {
            width: 50%;
        }

        .col3 {
            width: 75%;
        }

        .col4 {
            width: 100%;
        }

        .col1>* {
            background: yellow;
            margin: 0 20px;
        }

        .col3>* {
            background: yellow;
            margin: 0 20px;
        }

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

【讨论】：

几乎完美，但是看到开头和结尾都有空格，空格应该只存在于div之间。谢谢

【解决方案3】：

您用来分隔每个 div 的像素是所有 div 的 % 的一部分，正如您所说，超过了 div 宽度的百分比。我的意思是，如果列之间的空间是强制性的，你需要为每个列做 25% - 20px，依此类推

【讨论】：

谢谢，但是，这不起作用.. div 在另一行:(

【解决方案4】：

添加一些 CSS 变量来进行你想要的计算：

body {
  padding: 0px;
}

.row {
  --g:20px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid red;
  gap: var(--g);
}

.col1 {width:calc((100% - 3*var(--g))*1/4 + 0*var(--g))}
.col2 {width:calc((100% - 3*var(--g))*2/4 + 1*var(--g))}
.col3 {width:calc((100% - 3*var(--g))*3/4 + 2*var(--g))}
.col4 {width:calc((100% - 3*var(--g))*4/4 + 3*var(--g))}


.row div {
  border: 1px solid blue;
  box-sizing: border-box;
  background: yellow;
  font-size: 24px;
  text-align: center;
  height: 100px;
}

<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="col3">col3</div>
  <div class="col1">col1</div>
  <div class="col2">col2</div>
  <div class="col2">col2</div>
  <div class="col4">col4</div>
</div>

【讨论】：

太棒了！！！你能给我解释一下你的数学逻辑吗？我不明白:(。谢谢，天才
@yavgz 你有 4 列，所以有 3 个间隙。您首先删除所有空白100% - 3*gap，然后使用i/4 将该值相乘，其中i 是您需要考虑的列数[从1 到4]。最后我们在宽度上添加间隙，因为一个元素可以穿过 gapq。具有 4 列的元素将包含 3 个间隙，具有 3 列 2 间隙的元素，2 列 1 间隙，1 列 0 间隙。
谢谢破解，我有意见，如果你用0*var(--g)用sass你会报错
@yavgz stackoverflow.com/a/52422927/8620333