Flex 项目绕行到下一行以减少容器的宽度

Question

以下是我的代码，其中我希望 3 个.itemdiv 位于一行，接下来的 3 个 div 位于另一行。下面提到的代码在普通屏幕上运行良好。但是一旦我减小浏览器的大小，两个项目就会显示在一行上。让我知道我在这里做错了什么，尽管我已将宽度添加到 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>

Answer 1

通过添加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; }

Answer 2

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