Sempadan mewakili ketinggian dan lebar statik.

Saya ingin item 5 dan 6 kekal di baris kedua dan memotong item 3 dan 6 daripada dibalut untuk kali ketiga seperti yang ditunjukkan. Bagaimanakah saya boleh mencapai ini dengan Flex?

Untuk melengkapkan isu ini, lebar bekas (dipaparkan dengan sempadan) boleh diubah saiz mengikut tindakan pengguna. Apabila ia luas. Sebagai contoh, jika ia cukup lebar untuk memuatkan 4 elemen, ia akan memaparkan kesemua 4 elemen dalam baris pertama dan elemen yang tinggal di baris kedua.

Apabila kita meruntuhkan lebar bekas, saya mahu ia mempunyai paling banyak 2 baris seperti yang ditunjukkan dalam imej di bawah.

Saya mahu hasilnya kelihatan seperti ini untuk visualisasi:

[]

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