Flexbox atau Flexible Box merupakan sebuah mode pengaturan atau konsep layout pada CSS yang digunakan untuk mengatur elemen atau container beserta item didalamnya pada halaman web.
Model Layout 1 Dimensi (Horizontal/Vertikal) yang dapat mengatur jarak dan penjajaran antar item dalam kontainer secara dinamis atau ukuran tidak diketahui.
Sebelum Flexbox, ada beberapa layout model yang sudah ada, yaitu :
- Block
- Inline
- Table
- Positioned
Setelah adanya Flexbox, membuat halaman web yang responsive dan pembuatan struktur layout lebih mudah daripada memakai float atau positioning.
Property :
- main axis : dimensi horizontal / kolom
- cross axis : dimensi vertikal / baris
- main size : ukuran kolom
- cross size : ukuran baris
- main start : awal dari elemen secara horizontal
- main end : akhir dari elemen secara horizontal
- cross start : awal dari elemen secara vertikal
- cross end : akhir dari elemen secara vertikal
Kontainer Harus Memiliki Display Flex
- row : kiri ke kanan (default)
- row-reverse : kanan ke kiri
- column : atas kebawah
- column-reverse : bawah ke atas
Property flex-wrap : untuk mengatur komponen akan memindahkan item ke baris bawah jika tidak muat :
- nowrap (default) : akan berada dalam 1 baris dan diatur width
- wrap : akan dipindahkan ke bawah
- wrap-reverse : akan dipindahkan kebawah dan urutan dibalik
Property justify-content : mengatur rata dari elemen di dalam kontainer secara horizontal
- flex-star (default) : posisi awal
- flex-end : dimulai dari kanan
- center : posisi akan di tengah
- space-between : akan mengatur jarak antara komponen
- space-arround : mengatur komponen jarak yang sama
- space-evenly : mengatur jarak kanan kiri sama
Property align-content : mengatur rata dari elemen di dalam kontainer secara vertikal jika lebih dari 1 baris
- flex-star (default) : posisi awal
- flex-end : dimulai dari bawah
- center : posisi akan di tengah
- space-between : akan mengatur jarak antara baris
- space-arround : mengatur komponen jarak yang sama
- space-evenly : mengatur jarak atas dan bawah sama
Property align-items : untuk mengatur kesejajaran item secara vertikal
- stretch : akan memenuhi secara vertikal (default)
- flex-star : rata atas
- flex-end : rata bawah
- center : rata tengah
- baseline : sejajar dengan baseline fontnya
Property order : untuk mengatur urutan komponen berupa angka
Property flex-grow / flex : Untuk mengatur ukuran dari item agar website responsive diisi dengan angka dan akan memenuhi content
Property align-self : untuk mengatur salah satu komponen berada pada posisi tertentu terhadap cross axis atau vertikal
- auto : sesuai kondisi
- flex-star : atas
- flex-end : bawah
- center : tengah
- baseline : sejajar dengan baseline fontnya
- stretch : penuh