flex css - 在一定高度后剪辑元素而不是换行-PHP中文网问答

边框代表静态高度和宽度。

我希望第 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;
}

全部回复(1)

P粉3981178572024-04-02 11:12:50 1楼

将 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）即可！

赞 +0

添加回复