问在使用间隙时，如何将柔性项目正确设置为 50%？

最编程 2024-04-29 20:55:36

...

因此，我似乎误解了关于柔性盒的一些东西，不能正确地解决这个问题。

我有一个柔性箱容器，它包含四个列，它们是柔性箱容器的直接子列。一旦浏览器窗口宽度达到992px和更低，我想要更改，这样..flexbox项就占用了容器的50%的宽度。

问题是:如果我没有在..flexbox容器上使用“gap”属性，但是一旦我输入了gap: 1em，那么百分比就不能正常工作了，因为我知道gap是被考虑在内的，并且把这些.don项目的宽度相加。

问题:我如何正确地确保一旦浏览器窗口是992 so或更低，每个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/

上一篇：翻译 "Flexbox 基础知识

下一篇： Flex 灵活布局教程 - 语法

问 在使用间隙时，如何将柔性项目正确设置为 50%？

问 在使用间隙时，如何将柔性项目正确设置为 50%？

问在使用间隙时，如何将柔性项目正确设置为 50%？

问在使用间隙时，如何将柔性项目正确设置为 50%？