时间戳

首页 > 解决方案 > 在减少容器宽度时将 Flex 项目换行到下一行 - CSS

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

问题描述

以下是我的代码，其中我希望 3 个.itemdiv 在一行上，下一个 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>

标签： htmlcssresponsive-designflexbox

解决方案

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>

推荐阅读