Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Flexbox Wrapping & Align-Content: Mengelola Multi-Baris

Saat jumlah elemen anak terlalu banyak untuk satu baris, kita perlu memberi tahu kontainer induk bagaimana cara menangani "tumpahan" elemen tersebut.

1. Flex-Wrap (Perpindahan Baris)

Properti ini menentukan apakah elemen anak dipaksa dalam satu baris atau diizinkan untuk turun ke baris berikutnya.

• nowrap (Default): Semua elemen dipaksa dalam satu baris. Ini bisa menyebabkan elemen menyusut secara paksa atau meluap.

• wrap: Elemen akan turun ke baris baru jika ruang pada baris pertama sudah habis.

• wrap-reverse: Elemen akan berpindah ke baris baru, namun urutan barisnya dibalik (baris baru muncul di atas baris lama).

2. Align-Content (Perataan Antar Baris)

Penting: Properti ini hanya berfungsi jika flex-wrap: wrap (atau wrap-reverse) aktif dan terdapat lebih dari satu baris elemen. align-content mengatur distribusi ruang di antara baris-baris tersebut pada Cross Axis.

• flex-start: Baris-baris dikumpulkan di awal kontainer.

• flex-end: Baris-baris dikumpulkan di akhir kontainer.

• center: Baris-baris dikumpulkan di tengah kontainer.

• space-between: Jarak maksimal di antara baris, baris pertama di atas dan terakhir di bawah.

• space-around: Jarak yang sama di sekeliling setiap baris.

• stretch (Default): Baris akan meregang untuk menghabiskan sisa ruang yang ada.

3. Perbedaan Align-Items vs Align-Content

Seringkali pengem bang pemula bingung antara keduanya. Berikut cara mudah membedakannya:

• align-items: Mengatur bagaimana elemen sejajar di dalam baris mereka masing-masing. (Berlaku bahkan untuk satu baris).

• align-content: Mengatur bagaimana baris-baris tersebut sejajar satu sama lain di dalam kontainer. (Hanya berlaku untuk multi-baris).

Tutorial: Membuat Galeri Kartu yang Fleksibel

Mari kita terapkan pada daftar kategori berita di SatuMedia (riwara.id) agar tampilannya rapi saat dibuka di layar kecil.

Struktur HTML

<div class="category-wrapper"> <div class="tag">Politikdiv> <div class="tag">Teknologidiv> <div class="tag">Ekonomidiv> <div class="tag">Hiburandiv> <div class="tag">Olahragadiv> <div class="tag">Kesehatandiv>
div>

Kode CSS

.category-wrapper { display: flex; flex-wrap: wrap; /* Izinkan tag turun ke baris baru */ height: 300px; /* Tinggi ditentukan untuk melihat efek align-content */ align-content: space-around; /* Memberi jarak antar baris tag */ justify-content: center; background-color: #f0f4f8; padding: 20px;
} .tag { background-color: #3498db; color: white; padding: 10px 20px; border-radius: 20px; margin: 5px; /* Bisa juga menggunakan gap pada parent */
}

Tips Pro untuk Developer

1. Gunakan untuk Desain Responsif: flex-wrap: wrap adalah sahabat t erbaik untuk membuat grid tanpa media query. Gabungkan dengan flex-grow agar elemen memenuhi baris secara otomatis.

2. Hapus Tinggi Statis: Pada banyak kasus nyata, kita jarang memberikan height tetap pada kontainer. Jika kontainer tidak memiliki tinggi tetap, align-content tidak akan terlihat efeknya karena kontainer akan selalu menyesuaikan tingginya dengan konten.

3. Kombinasi dengan Gap: Sejak adanya properti gap, mengatur jarak antar baris menjadi jauh lebih mudah daripada menggunakan margin pada tiap item saat melakukan wrapping.