flex css - elemen klip selepas ketinggian tertentu dan bukannya pembalut

Question

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

Answer 1

Merujuk bekas Flex sebagai "elemen" agak mengelirukan. Saya secara peribadi lebih suka memanggil mereka "bekas blabla", di mana "blabla" ialah air yang saya gunakan di bahagian itu (cth: "bekas-pautan nav". Tetapi sudah tentu ia hanya soal rasa.

Berkenaan soalan ini, terima kasih atas maklumat baharu, jika anda terbuka menerima cadangan, cara paling mudah ialah menggunakan 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;
}

Anda boleh mendapatkan butiran lanjut di sini: dokumentasi MDN, css-grid

Ah, satu lagi perincian, apa yang anda panggil "kliping" ialah apa yang berlaku apabila bekas induk tidak cukup besar untuk memuatkan bekas kanak-kanak saiz tetap, jadi jika selepas menggunakan perubahan ini anda lihat Sebaliknya ia bertindak sama seperti bekas kedua imej, hanya jadikan komponen induk lebih kecil (cth. 200px)!