Flexbox

Sebelum ada flexbox, menempatkan kotak di tengah secara vertikal butuh trik. Dengan display: flex, cukup dua deklarasi: justify-content dan align-items.

Satu baris atau satu kolom

Flexbox, modul CSS Flexible Box Layout, menyusun sekelompok kotak sepanjang satu garis. Pasang display: flex pada sebuah wadah, maka anak-anak langsungnya, yaitu item flex, berjajar berdampingan alih-alih bertumpuk. Satu deklarasi itu sudah cukup untuk bilah menu, deretan tombol, atau kartu yang bagian kakinya harus menempel di bawah. Flexbox bekerja dalam satu dimensi sekaligus: baris atau kolom. Jika kamu butuh baris dan kolom bersamaan, grid, di unit berikutnya, biasanya alat yang lebih tepat.

Dua sumbu

Segala hal di flexbox dijelaskan dengan dua sumbu. Sumbu utama adalah arah aliran item, diatur oleh flex-direction: row (bawaan) atau column. Sumbu silang tegak lurus terhadapnya. justify-content membagikan item sepanjang sumbu utama: flex-start, center, flex-end, space-between (item pertama dan terakhir di tepi, celah sama di antaranya), atau space-around. align-items menempatkannya pada sumbu silang: stretch (bawaan, semua item setinggi item tertinggi), flex-start, center, atau flex-end. Jadi, sebuah kotak berada di tengah pada kedua arah dengan justify-content: center dan align-items: center.

.bar {
  display: flex;
  justify-content: space-between;  /* logo left, menu right */
  align-items: center;             /* vertically centred */
  gap: 16px;                       /* space between items */
}
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card  { flex: 1 1 200px; }        /* grow, shrink, start at 200px */

Celah dan pembungkusan

gap memberi ruang di antara item tanpa menambah ruang di tepi luar, yang biasanya memang kamu inginkan dan sulit dicapai dengan margin. Secara bawaan, item flex tetap di satu baris dan menyusut agar muat, walaupun jadi terjepit. flex-wrap: wrap membolehkan item pindah ke baris baru saat ruang tidak cukup, jadi deretan empat kartu di laptop bisa menjadi dua baris berisi dua di tablet dan satu kolom di ponsel, tanpa media query.

Cara item membesar dan menyusut

Singkatan flex pada item menerima tiga nilai. flex-grow menyatakan seberapa banyak sisa ruang yang diambil item dibandingkan saudaranya; flex-shrink menyatakan seberapa rela ia menyusut saat ruang habis; flex-basis adalah ukuran awalnya sebelum membesar atau menyusut. flex: 1 1 200px berarti mulai dari 200 piksel, lalu berbagi ruang lebih sama rata dengan item lain yang juga punya grow 1. flex: 1 saja adalah singkatan untuk 1 1 0%, yang membuat semua item sama lebar. Beri satu item flex-grow: 2 dan yang lain 1, maka item itu mengambil dua kali bagian mereka dari sisa ruang.

Urutan tampilan dan urutan sebenarnya

Flexbox bisa mengubah urutan tampil item, dengan flex-direction: row-reverse atau properti order, tanpa menyentuh HTML. Gunakan dengan hati-hati. Fokus keyboard dan pembaca layar tetap mengikuti urutan di HTML, jadi jika layar menampilkan Contact sebelum Home tetapi Tab mengunjungi Home lebih dulu, pengguna keyboard jadi bingung. Jika urutan itu penting bagi makna, ubahlah di HTML.