Flexbox (Flexible Box Layout) adalah salah satu fitur di CSS yang memudahkan pengembang web untuk mengatur tata letak elemen dalam sebuah container. Dengan Flexbox, kita bisa membuat layout yang fleksibel, rapi, dan mudah disesuaikan dengan berbagai ukuran layar. Berikut adalah beberapa properti penting dalam Flexbox:
1. flex-wrap
Properti flex-wrap menentukan apakah item dalam container akan dibungkus ke baris atau kolom baru ketika ruang yang tersedia tidak cukup.
- nowrap: (default) semua item akan tetap berada dalam satu baris/kolom, meskipun ruangnya sempit.
- wrap: item akan otomatis turun ke baris/kolom berikutnya jika tidak cukup ruang.
- wrap-reverse: sama seperti
wrap, tetapi arah pembungkusannya terbalik.
2. flex-direction
Properti flex-direction digunakan untuk mengatur arah utama (main axis) dari item di dalam container.
- row: (default) item ditampilkan secara horizontal, dari kiri ke kanan.
- row-reverse: item ditampilkan horizontal dari kanan ke kiri.
- column: item ditampilkan secara vertikal, dari atas ke bawah.
- column-reverse: item ditampilkan vertikal dari bawah ke atas.
3. justify-content
Properti justify-content mengatur perataan item di sepanjang main axis (arah utama yang ditentukan oleh flex-direction).
Nilai yang dapat digunakan antara lain:
- flex-start: item diratakan ke awal container.
- flex-end: item diratakan ke akhir container.
- center: item diratakan ke tengah.
- space-between: ruang diatur agar item tersebar dengan jarak sama, elemen pertama di awal dan terakhir di akhir.
- space-around: item memiliki ruang di sekelilingnya dengan jarak sama.
- space-evenly: semua ruang antar item, termasuk sisi luar, dibagi rata.
4. align-items
Properti align-items digunakan untuk mengatur perataan item di sepanjang cross axis (sumbu silang dari arah utama).
Nilai yang bisa digunakan:
- stretch: (default) item diregangkan agar sesuai tinggi/lebarnya container.
- flex-start: item disejajarkan ke awal cross axis.
- flex-end: item disejajarkan ke akhir cross axis.
- center: item disejajarkan ke tengah cross axis.
Dengan memahami properti dasar Flexbox seperti flex-wrap, flex-direction, justify-content, dan align-items, kita bisa lebih mudah mengatur tata letak elemen dalam sebuah halaman web. Flexbox sangat membantu dalam membuat desain yang responsif, rapi, dan modern tanpa perlu terlalu banyak kode tambahan.
