Flex项目包装到下一行以减少容器的宽度 - CSS [重复]答案

【问题标题】：Flex item wrapping to next line on reducing the width of container - CSS [duplicate]Flex项目包装到下一行以减少容器的宽度 - CSS [重复]
【发布时间】：2020-07-09 22:53:12
【问题描述】：

以下是我的代码，其中我希望 3 个 .item div 在一行上，下一个 3 在另一行上。下面提到的代码在普通屏幕上工作正常。但是，一旦我减小浏览器的大小，就会有 2 个项目显示在单行上。让我知道我在这里做错了什么，尽管我已将宽度添加为 33%，它应该可以容纳它，但我可能在这里遗漏了一些东西。

代码 -

:root { box-sizing: border-box; }
.flex { display: flex; width: 100%; flex-wrap: wrap; }
.item { flex: 0 1 33%; border: 1px solid red; }

<div class="flex">
  <div class="item">Flex Item 1</div>
  <div class="item">Flex Item 2</div>
  <div class="item">Flex Item 3</div>
  <div class="item">Flex Item 4</div>
  <div class="item">Flex Item 5</div>
  <div class="item">Flex Item 6</div>
</div>

【问题讨论】：

你忘了考虑边框的大小。您是否尝试将box-sizing: border-box; 添加到您的项目中？
@AmauryHanser 哦，伙计..你让我很开心..lol :) 谢谢它帮助...请在答案中添加这个，我会接受你的:)
完成。我很高兴它有帮助！ :)

标签： html css responsive-design flexbox

【解决方案1】：

Amaury Hanser 是对的 - 将 box-sizing: border-box; 添加到项目将解决您的问题。

另一种方法是使用grid 而不是flex。这允许您使用1fr 单位，当将宽度平均分配到指定的数字列时，它会自动考虑填充和边框大小等因素。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  border: 1px solid red;
}

<div class="grid">
  <div class="item">Flex Item 1</div>
  <div class="item">Flex Item 2</div>
  <div class="item">Flex Item 3</div>
  <div class="item">Flex Item 4</div>
  <div class="item">Flex Item 5</div>
  <div class="item">Flex Item 6</div>
</div>

【讨论】：

【解决方案2】：

通过向您的项目添加box-sizing: border-box，您将确保它们的宽度不会增长超过 33%。

没有它，它们的宽度等于 33% + 1px + 1px。在某些时候，它将超过其父宽度的三分之一。

:root { box-sizing: border-box; }
.flex { display: flex; width: 100%; flex-wrap: wrap; }
.item { flex: 0 1 33%; border: 1px solid red; box-sizing: border-box; }

【讨论】：