当使用间隙时，我如何正确地将伸缩项设置为50% ?

Question

所以我似乎误解了flexbox的一些东西，不能正确解决这个问题。

我有一个flexbox容器，包含四列，这是flexbox容器的直接子。一旦浏览器窗口宽度达到992px或更低，我想改变。flexbox-item占用50%的容器宽度。

问题:如果我不使用。flexbox-container上的"gap"属性，似乎可以正常工作，但一旦我把gap: 1em，那么百分比就不能正常工作，因为我理解的差距被考虑在内，并将宽度加到那些。flex-item项目中。

问题:我如何正确地确保一旦浏览器窗口是992px或更低，每个flexbox项目需要50%，所以我可以在每一行有两列，因为显然我可以玩"宽度"属性，给它，让我们说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

您可以尝试使用网格或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>