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