CSS · Bab 6

Flexbox

Menyusun elemen dalam satu baris atau kolom dengan display flex, mengatur arah, perataan pada sumbu utama dan sumbu silang, jarak gap, pembungkusan flex-wrap, serta pembagian ruang dengan flex 1.

Flexbox adalah cara modern menyusun elemen dalam satu arah: berjajar dalam baris, atau bertumpuk dalam kolom. Navigasi, deretan tombol, dan kartu yang tingginya sama adalah pekerjaan sehari-hari flexbox.

6.1 Wadah Flex dan Item Flex

display: flex dipasang pada induk. Induk itu menjadi wadah flex, dan anak langsungnya menjadi item flex. Cucu tidak ikut terpengaruh.

Flexbox bekerja dengan dua sumbu:

• sumbu utama: arah item disusun. Bawaannya mendatar, dari kiri ke kanan.
• sumbu silang: tegak lurus terhadap sumbu utama.

6.2 flex-direction

flex-direction menentukan arah sumbu utama:

• row (bawaan): mendatar.
• column: tegak, dari atas ke bawah.
• row-reverse dan column-reverse: arah dibalik.

Arah terbalik hanya mengubah tampilan. Urutan baca pembaca layar dan urutan tombol Tab tetap mengikuti urutan HTML, jadi jangan memakainya untuk mengubah urutan isi yang bermakna.

6.3 justify-content dan align-items

• justify-content meratakan item di sumbu utama: flex-start, center, flex-end, space-between (sisa ruang di antara item), space-around, dan space-evenly.
• align-items meratakan item di sumbu silang: stretch (bawaan, item merentang setinggi wadah), flex-start, center, flex-end, dan baseline.

Saat flex-direction: column, sumbunya bertukar: justify-content mengatur arah tegak dan align-items mengatur arah mendatar.

6.4 gap dan flex-wrap

• gap memberi jarak di antara item, tidak di tepi luar. Ini lebih rapi daripada memberi margin pada setiap item.
• Secara bawaan (flex-wrap: nowrap), semua item dipaksa dalam satu baris: item menyempit, atau meluber bila tidak bisa menyempit lagi. flex-wrap: wrap memindahkan item yang tidak muat ke baris berikutnya.

6.5 flex: 1 dan Pembagian Ruang

flex: 1 membuat item tumbuh mengisi sisa ruang. Bentuk ini singkatan dari flex: 1 1 0% (flex-grow 1, flex-shrink 1, flex-basis 0%). Bila semua item flex: 1, lebarnya sama. Item flex: 2 mendapat dua kali bagian item flex: 1. Pola yang sering dipakai: kolom samping berlebar tetap, isi utama flex: 1.

6.6 Ringkasan

• display: flex pada induk menjadikan anak langsungnya item flex.
• flex-direction menentukan sumbu utama. Sumbu silang tegak lurus terhadapnya.
• justify-content meratakan di sumbu utama, align-items di sumbu silang.
• gap memberi jarak antaritem, dan flex-wrap: wrap memindahkan item ke baris baru.
• flex: 1 membagi sisa ruang.