在减小容器宽度时将项目换行到下一行 - CSS

Question

以下是我的代码，其中我希望 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>

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

Answer 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; }

在减小容器宽度时将项目换行到下一行 - CSS

Flex item wrapping to next line on reducing the width of container - CSS

html

css

flexbox

responsive-design