Item Flow Bagian 1: Cara Baru CSS Mengatur Struktur Web

Latar belakang

Seiring berjalannya waktu, layout Flexbox dan Grid menjadi memungkinkan hanya dengan CSS,
namun layout Masonry sampai sekarang masih harus mengandalkan bantuan JavaScript. Karena layout ini, berbagai diskusi lintas browser pun berlangsung. Chrome mengimplementasikan layout baru (display: masonry), sementara Firefox dan Safari mengimplementasikannya dengan cara mengatur grid-template-* : collapse.

Namun seseorang mengajukan pendekatan yang sangat berbeda dari yang ada sebelumnya. Gagasannya adalah menyatukan layout Masonry, Grid, dan Flexbox menjadi satu.

Menyatukan alur Flexbox dan Grid

Sebelumnya, cara mengatur alur elemen di dalam kontainer berbeda-beda untuk tiap layout.

.container {  
    /* Flexbox */  
    flex-direction: row | row-reverse | column | column-reverse;  
    flex-wrap: nowrap | wrap | wrap-reverse;  
    /* flex-direction + flex-wrap */  
    flex-flow: <flex-direction> <flex-wrap>;  
  
    /* Grid */  
    grid-auto-flow: row | column | dense;  
}  

Fungsi ini rencananya akan disatukan ke dalam fitur-fitur berikut.

• item-direction
• item-wrap
• item-pack
• item-slack

item-direction

Menentukan arah aliran elemen di dalam kontainer. Properti ini menggantikan flex-direction dan grid-auto-flow.

.container {  
    item-direction: row | row-reverse | column | column-reverse;  
}  

item-wrap

Menentukan perilaku dan arah saat satu baris meluap ketika elemen di dalam kontainer disusun. Properti ini menggantikan flex-wrap.

.container {  
    item-wrap: auto || [[nowrap | wrap] | [normal | reverse]];  
}  

Layout Grid pada dasarnya menggunakan cara wrap, tetapi jika diatur menjadi item-wrap: nowrap, semua elemen akan disusun hanya dalam satu baris sehingga bisa membuat layout dengan lebar yang sama.

item-pack

Menentukan cara elemen di dalam kontainer ditumpuk. Properti ini menggantikan grid-auto-flow: dense.

.container {  
    item-pack: normal | dense;  
}  

Pada layout Flexbox sebelumnya tidak ada fitur ini, tetapi dengan hadirnya item-pack: dense, elemen bisa ditumpuk dengan cara yang sama seperti Grid. Sebagai contoh, jika sebelumnya Flexbox dengan wrap saat menyusun elemen selalu pindah ke baris berikutnya ketika sisa ruang di satu baris lebih kecil dari lebar elemen, ke depannya ia dapat diimplementasikan untuk lebih dulu menempatkan elemen tersebut ke ruang kosong di baris sebelumnya jika masih muat.

Selain itu, cara baru yang sebelumnya tidak ada juga bisa ditambahkan.

• item-pack: balance: seperti text-wrap: balance, jumlah elemen di tiap baris bisa dibuat kurang lebih seimbang.
• item-pack: collapse: tujuan akhirnya adalah mempermudah implementasi layout Masonry.

item-slack

Properti untuk mengatur ukuran ruang sisa minimum yang harus ditinggalkan pada tiap baris saat menumpuk elemen di dalam kontainer. Properti ini menggantikan grid-slack dan masonry-slack yang pernah diusulkan sebelumnya. Nama item-slack sendiri masih dalam pembahasan. (Catatan penerjemah: saat ini sudah ditetapkan menjadi flow-tolerance.)

Digabungkan bersama

Sekarang, untuk membuat Flexbox yang disusun ke bawah, pengaturannya menjadi seperti ini.

.container {  
    display: flex;  
    item-direction: column;  
    item-wrap: nowrap;  
}  

Cara yang lebih singkat juga direncanakan hadir.

.container {  
    display: flex;  
    item-flow: column nowrap;  
}  

Nama dan cara kerja properti ini masih dalam pembahasan.

---

Saat ini layout Masonry telah diubah menjadi display: grid-lanes. Namun, properti item-* masih dibahas secara positif.

• Unifying grid-auto-flow and flex-flow(item-flow terkait diskusi)
• Decide on a name for item-slack(sudah ditetapkan menjadi flow-tolerance)
• Brick by brick: Help us build CSS Masonry
• CSS Grid Lanes

Secara pribadi, saat semuanya disatukan, akan lebih bagus lagi jika display: flex atau grid juga bisa dihilangkan.