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

Question

看来我对flexbox的理解有误，无法正确解决问题。

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

问题：如果我不在 .flexbox-container 上使用 'gap' 属性似乎工作正常但是一旦我输入 gap: 1em，那么百分比就不能正常工作，据我所知 gap 被考虑在内并且将这些 .flex-item 项目的宽度加起来。

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

非常感谢任何帮助。

这是我的代码：

<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>

和CSS：

.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%;
  }
}

你也可以在这里看到结果：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>

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

How do I correctly set flex item to 50% percent when gap is used?

html

css

flexbox