使用间隙时如何正确将弹性项目设置为 50%？

Question

所以看来我误解了有关 Flexbox 的一些内容，并且无法正确解决问题。

我有一个 Flexbox 容器，其中包含四列，它们是 Flexbox 容器的直接子级。一旦浏览器窗口宽度达到 992px 及更低，我想进行更改，以便 .flexbox-item 占据容器宽度的 50%。

问题：
如果我不在 .flexbox-container 上使用“gap”属性，它似乎工作正常，但是一旦我设置了gap：1em，那么百分比就无法正常工作，据我所知，间隙被考虑在内并增加了宽度到那些 .flex-item 项目。

问题：
我如何正确确保一旦浏览器窗口为 992px 或更低，每个 Flexbox 项目都占 50%，这样我可以在每行中有两列，因为显然我可以使用“width”属性并给它假设 45 % 它会起作用，但对我来说它看起来不是一个正确的解决方案。我想知道当使用“间隙”属性时仍然正确使用这些百分比的最简单方法是什么。

这是我的代码：

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 1em;
}

.flexbox-item {
  width: 25%;
  background-color: lightgreen;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 992px) {
  .flexbox-item {
    width: 50%;
  }
}

<div class="flexbox-container">
  <div class="flexbox-item">Item 1</div>
  <div class="flexbox-item">Item 2</div>
  <div class="flexbox-item">Item 3</div>
  <div class="flexbox-item">Item 4</div>
</div>

您还可以在这里看到结果：https ://jsfiddle.net/Erasus/gxtvhuow/12/

Answer 1

您可以尝试使用 grid 或 flex 任一工作，但我会这样做。如果这就是您的意思，请告诉我。

.flexbox-container {
 display: grid;
 grid-template-columns: auto auto auto auto;
 grid-gap: 1em;
 }

.flexbox-item {
  width: 100%;
  background-color: lightgreen;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexbox-container2 {
 display: flex;
 grid-gap: 1em;
 }


.flexbox-item2 {
  width: 100%;
  background-color: lightgreen;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 992px) {
.flexbox-container {
    display: grid;
    grid-template-columns: auto auto;
    
  }
  
.flexbox-container2 {
 display: flex;
 flex-wrap: wrap;
 grid-gap: 1em;
 }
 
 .flexbox-item2:nth-child(2n + 1),
 .flexbox-item2:nth-child(2n + 2) {
 flex: 0 0 calc(50% - 10px);
 
}
}

<h1>This is the grid way</h1>
<div class="flexbox-container">
  <div class="flexbox-item">Item 1</div>
  <div class="flexbox-item">Item 2</div>
  <div class="flexbox-item">Item 3</div>
  <div class="flexbox-item">Item 4</div>
</div>

<br>

<h1>This is the flex way</h1>
<div class="flexbox-container2">
  <div class="flexbox-item2">Item 1</div>
  <div class="flexbox-item2">Item 2</div>
  <div class="flexbox-item2">Item 3</div>
  <div class="flexbox-item2">Item 4</div>
</div>