Flexbox 1: Container
Menyusun elemen sejajar dengan mudah memakai Flexbox: display flex, arah, perataan, pembungkusan baris, dan jarak (gap).
Mengapa Flexbox?
Dulu menyusun elemen ke samping, menengahkan secara vertikal, atau membagi ruang sama rata adalah pekerjaan rumit. Flexbox (Flexible Box) menyelesaikannya dengan beberapa baris CSS. Flexbox bekerja satu dimensi: satu baris atau satu kolom.
Mengaktifkan flexbox
Beri display: flex pada induk (container). Anak langsungnya otomatis menjadi flex item dan berjejer ke samping.
<div class="baris">
<div>A</div><div>B</div><div>C</div>
</div>.baris {
display: flex;
}Dua sumbu
Flexbox punya main axis (sumbu utama, searah susunan) dan cross axis (tegak lurus). Secara bawaan sumbu utama horizontal.
| Properti (di container) | Mengatur | Nilai umum |
|---|---|---|
flex-direction | Arah sumbu utama | row, column, row-reverse, column-reverse |
justify-content | Perataan di sumbu utama | flex-start, center, flex-end, space-between, space-around, space-evenly |
align-items | Perataan di sumbu silang | stretch (bawaan), flex-start, center, flex-end |
flex-wrap | Boleh turun baris? | nowrap (bawaan), wrap |
gap | Jarak antar item | 16px |
Resep: menengahkan sesuatu (horizontal + vertikal)
.tengah {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertikal */
height: 200px;
}Ini jawaban atas pertanyaan klasik "bagaimana cara menengahkan div?".
Resep: navigasi dengan logo di kiri dan menu di kanan
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}Jarak antar item: gap
Gunakan gap daripada margin pada item. Ia hanya memberi jarak di antara item (bukan di tepi luar), sehingga lebih bersih.
.menu { display: flex; gap: 16px; }flex-wrap: turun baris
Tanpa wrap, item dipaksa mengecil agar muat dalam satu baris. Dengan flex-wrap: wrap, item yang tidak muat turun ke baris berikutnya, berguna untuk deretan kartu.
Cara ingat: justify- = sumbu utama, align- = sumbu silang. Bila flex-direction: column, sumbunya tertukar: justify-content jadi vertikal dan align-items jadi horizontal.