边框代表静态高度和宽度。
我希望第 5 项和第 6 项保留在第二行，并剪掉第 3 项和第 6 项，而不是如图所示第三次包裹。我如何通过 Flex 实现这一目标？
为了补充这个问题，容器的宽度（用边框显示）可以通过用户操作调整大小。当它很宽时。例如，如果它的宽度足以容纳 4 个元素，则它将在第一行中显示所有 4 个元素，而在第二行中显示其余的元素。
当我们折叠容器的宽度时，我希望它最多有2行，如下图所示。
我希望结果看起来像这样以便可视化：
[]
https://codepen.io/akeni/pen/LYBGOXB
<div id="example-element" class="transition-all" style="flex-wrap: wrap;">
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
<div>Item Four</div>
<div>Item Five</div>
<div>Item Six</div>
</div>
#example-element {
border: 1px solid #c5c5c5;
width: 300px;
height: 150px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
#example-element > div {
background-color: rgba(0,0,255,.2);
border: 3px solid #00f;
width: 60px;
margin: 10px;
} 
将 Flex 容器称为“元素”有点令人困惑。我个人更喜欢称它们为“blabla-container”，其中“blabla”是我在该部分中使用的水（例如：“nav-links-container”。但这当然只是一个品味问题。
关于这个问题，感谢您提供新信息，如果您愿意接受建议，最简单的方法是使用 css-grid：
#example-element { display: grid; grid-template-columns: repeat(3, 1fr); /* or this way: grid-template-columns: auto auto auto; */ overflow-x: hidden !important; }您可以在此处找到更多详细信息：MDN文档，css-grid
啊，还有一个细节，即您所说的“剪辑”，当父容器不够大，无法容纳固定大小的子容器时，就会发生这种情况，因此，如果在应用此更改后，您看不到它的行为与第二个容器相同图片，只需将父组件变小（例如 200px）即可！