Flex CSS – Element nach einer bestimmten Höhe abschneiden, anstatt es zu umbrechen

Question

Ränder stellen statische Höhe und Breite dar.

Ich möchte, dass die Artikel 5 und 6 in der zweiten Reihe bleiben und die Artikel 3 und 6 ausschneiden, anstatt wie gezeigt ein drittes Mal eingewickelt zu werden. Wie erreiche ich das mit Flex?

Als Ergänzung zu diesem Problem kann die Breite des Containers (mit einem Rand angezeigt) durch Benutzeraktion geändert werden. Wenn es breit ist. Wenn es beispielsweise breit genug ist, um 4 Elemente aufzunehmen, werden alle 4 Elemente in der ersten Reihe und die übrigen Elemente in der zweiten Reihe angezeigt.

Wenn wir die Breite des Containers reduzieren, möchte ich, dass er höchstens zwei Reihen hat, wie im Bild unten gezeigt.

Ich möchte, dass das Ergebnis zur Visualisierung so aussieht:

[]

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

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