计算弹性基础时考虑差距

Question

我正在尝试使用

gap

来指定我的网格系统中弹性项目之间的间隙，但遇到了一个主要缺点。看起来，当您将

flex-grow: 0;

/

flex-shrink: 0;

与填充整个可用宽度的

gap

和

flex-basis

值结合使用时（即带有

flex: 0 0 33.3333%;

的三列），这些列会溢出其父容器，因为

gap

不考虑

flex: 0 0 33.3333%

指定的固定宽度。

类似于

box-sizing: border-box;

，有什么方法可以指示渲染引擎在确定这些列的宽度时应该减去间隙？

示范：

.row {
    display: flex;
    gap: 30px;
    border: 2px solid red;
}

.col {
    flex: 0 0 33.3333%;
    background: teal;
    border: 2px solid #004D4D;
    color: white;
    font-weight: 700;
    padding: 50px;
    text-align: center;
}

:root {
    font-family: sans-serif;
}

* {
    box-sizing: border-box;
}

<h2>With gap:</h2>

<div class="row">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
</div>

<h2>Without gap:</h2>

<div class="row" style="gap:0;">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
</div>

注意：我可以用像

flex-basis: calc($width - ($gap / ($number-of-columns / 2));

这样的公式来解释这个，但是因为这是一个可重用的网格系统，我实际上不能解释所有可能的场景。

Answer 1

您提到的公式有效...您可以使用 CSS 变量来制作可重用的网格系统。我和一个伙伴想到了这个：

.flex {
  --cols: 3;
  --gap: 30px;
  display: flex;
  gap: var(--gap);
}

.flex-child {
  flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
}

@media (max-width: 1000px) {
  .flex{
    --cols: 2;
  }
}

@media (max-width: 750px) {
  .flex{
    --cols:1;
  }
}

那么你需要改变的就是变量

--cols

和

--gap

https://codepen.io/pyledigital/pen/mdWmjQb

Answer 2

这是另一种不太优雅的快速破解方法。类似于 UPinar 的回答，它改变了外部 flex 容器。这里右边有负边距（这可能会导致其他布局问题！）。这个“解决方案”使用的是 shrink 0。它也适用于包装 flex。

我同意这不应该如此复杂和骇人听闻。也许我们错过了什么？我也觉得这并不是我希望结合

gap

属性找到的真正想要的框大小边框行为。

flex

和

gap

应该是免费的：画三个容器，每个容器占用三分之一的宽度，并且在它们之间留出一些空间。 AFAIK gap 以这种方式与 CSS 网格和 CSS 列一起工作。

.flex {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.flex.gap {
   gap: var(--space-s);
   margin-right: calc(-1 * var(--space-s));
}

.col {
    flex-basis: 33.3333%;
    background: teal;
    border: 2px solid #004D4D;
    color: white;
    font-weight: 700;
    padding: 50px;
    text-align: center;
}

.flex.gap .col {
    flex-basis: calc(33.3333% - var(--space-s));
    background: teal;
    border: 2px solid #004D4D;
    color: white;
    font-weight: 700;
    padding: 50px;
    text-align: center;
}

:root {
    font-family: sans-serif;
    --space-s: 1rem;
}

* {
    box-sizing: border-box;
}

<h2>With gap</h2>

<div class="flex gap">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
    <div class="col">
        4
    </div>
    <div class="col">
        5
    </div>
    <div class="col">
        6
    </div>
</div>

<h2>Without gap</h2>

<div class="flex">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
    <div class="col">
        4
    </div>
    <div class="col">
        5
    </div>
    <div class="col">
        6
    </div>
</div>

Answer 3

当您将

padding-right: calc(var(--gap-space) * 2);

添加到父容器时。父容器宽度将在子容器使用父容器宽度

100%

之前计算。在子容器内使用其宽度之前，您需要更改父容器的宽度。

*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  margin: 0;
  background-color: bisque;
  display: grid;
  place-content: center;
}


:root{
  --gap-space:30px;
  font-family: sans-serif;
}


.row-1 {
  display: flex;
  gap: var(--gap-space);
  border: 2px solid red;
  padding-right: calc(var(--gap-space) * 2);

}

.row-1 .col{
  background: teal;
  border: 2px solid #004D4D;
  color: white;
  font-weight: 700;
  padding: 50px;
  text-align: center;
  flex: 0 0 calc(100% / 3);
}

.row-2{
  display: flex;
  flex-direction: row;
  border: 2px solid red;
}

.row-2 .col{
  background: teal;
  border: 2px solid #004D4D;
  color: white;
  font-weight: 700;
  padding: 50px;
  text-align: center;
  flex: 0 0 calc(100% / 3);
}

<h2>With gap:</h2>

    <div class="row-1">
      <div class="col">1</div>
      <div class="col">2</div>
      <div class="col">3</div>
    </div>

    <h2>Without gap:</h2>

    <div class="row-2" style="gap: 0">
      <div class="col">1</div>
      <div class="col">2</div>
      <div class="col">3</div>
    </div>

Answer 4

只使用宽度有什么问题？

.col {
    width: 33.3333%;
  ...
}

.row {
    display: flex;
    gap: 30px;
    border: 2px solid red;
}

.col {
    width: 33.3333%;
    background: teal;
    border: 2px solid #004D4D;
    color: white;
    font-weight: 700;
    padding: 50px;
    text-align: center;
}

:root {
    font-family: sans-serif;
}

* {
    box-sizing: border-box;
}

<h2>With gap:</h2>

<div class="row">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
</div>

<h2>Without gap:</h2>

<div class="row" style="gap:0;">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
</div>