Browser: HTML, CSS, DOM, dan Aksesibilitas · 4/8

Layout dengan flexbox dan grid

Satu sumbu atau dua. Pilih yang tepat dan layout berhenti jadi coba-coba.

Baca 32 menit

Setelah pelajaran ini kamu bisa

Memilih antara flexbox dan grid dengan sadar
Menjelaskan main axis dan cross axis
Memprediksi cara flex membagikan ruang sisa
Mencegah sebuah item menyusut di bawah ukuran kontennya

Satu keputusan sudah mencakup sebagian besar kasus: flexbox untuk satu arah, grid untuk dua. Sederet button itu flex. Halaman dengan sidebar dan header itu grid.

	Flexbox	Grid
Dimensi	Satu per satu	Baris dan kolom bersamaan
Digerakkan oleh	Ukuran kontennya sendiri	Layout yang kamu definisikan
Cocok untuk	Toolbar, deret button, memusatkan, kartu dalam satu baris	Layout halaman, galeri, form
Penentuan ukuran	Item bernegosiasi soal ruang	Track dideklarasikan di awal

Flexbox: dua sumbunya

Ini konsep yang membuat flexbox jadi masuk akal. flex-direction menentukan main axis; yang satunya jadi cross axis. justify-content selalu bekerja sepanjang main axis, align-items selalu sepanjang cross axis.

`flex-direction`	Main axis	`justify-content` menggerakkan	`align-items` menggerakkan
`row` (default)	Horizontal	Kiri dan kanan	Atas dan bawah
`column`	Vertikal	Atas dan bawah	Kiri dan kanan

css

.toolbar {
  display: flex;
  gap: 0.5rem;              /* use gap, never margins between children */
  align-items: center;      /* vertically centred, because direction is row */
  justify-content: space-between;
}

/* Perfect centring, both axes, three lines. */
.centre {
  display: flex;
  align-items: center;
  justify-content: center;
}

Di Tailwind blok pertama itu jadi flex gap-2 items-center justify-between — property yang sama, ditulis inline.

Bagaimana ruang dibagikan

Tiga property mengontrol ukuran sebuah item, dan singkatan flex: 1 mengatur ketiganya. Memahami hitungannya membuat layout bisa diprediksi alih-alih coba-coba.

Property	Artinya
`flex-basis`	Ukuran awal sebelum pembagian apa pun
`flex-grow`	Porsi ruang sisa yang diambil. 0 berarti tidak mengambil.
`flex-shrink`	Seberapa rela ia melepas ruang saat ruangnya tidak cukup
`flex: 1`	Singkatan untuk `1 1 0%` — tumbuh, menyusut, abaikan ukuran konten

Coba sendiri

Hitungan pembagiannya. Ubah lebar container atau nilai grow-nya lalu tebak hasilnya sebelum menjalankan.

function distribute(containerWidth, items) {
  const totalBasis = items.reduce((sum, i) => sum + i.basis, 0);
  const free = containerWidth - totalBasis;

if (free >= 0) {
    const totalGrow = items.reduce((sum, i) => sum + i.grow, 0);
    return items.map((item) => ({
      name: item.name,
      // No grow anywhere means the free space simply stays empty.
      width: totalGrow === 0 ? item.basis : item.basis + (item.grow / totalGrow) * free,
    }));
  }

// Not enough room: shrink, weighted by shrink factor AND by basis.
  const totalWeighted = items.reduce((sum, i) => sum + i.shrink * i.basis, 0);
  return items.map((item) => ({
    name: item.name,
    width: item.basis + (item.shrink * item.basis / totalWeighted) * free,
  }));
}

function show(label, containerWidth, items) {
  console.log(label + "  (container " + containerWidth + "px)");
  for (const r of distribute(containerWidth, items)) {
    console.log("   " + r.name.padEnd(10) + Math.round(r.width) + "px");
  }
  console.log("");
}

show("all flex:1 - equal share", 600, [
  { name: "sidebar", basis: 0, grow: 1, shrink: 1 },
  { name: "content", basis: 0, grow: 1, shrink: 1 },
]);

show("content grows twice as fast", 600, [
  { name: "sidebar", basis: 0, grow: 1, shrink: 1 },
  { name: "content", basis: 0, grow: 2, shrink: 1 },
]);

show("fixed sidebar, content takes the rest", 600, [
  { name: "sidebar", basis: 200, grow: 0, shrink: 0 },
  { name: "content", basis: 0, grow: 1, shrink: 1 },
]);

show("too small - everything shrinks", 300, [
  { name: "sidebar", basis: 200, grow: 0, shrink: 1 },
  { name: "content", basis: 400, grow: 0, shrink: 1 },
]);

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Lihat kasus ketiga: flex-basis: 200px dengan flex-grow: 0 dan flex-shrink: 0 adalah sidebar tetap yang standar, dan flex: 1 pada kontennya mengambil semua sisanya. Pola itu mencakup banyak sekali layout nyata.

Grid

css

.gallery {
  display: grid;
  /* Responsive with no media queries at all: as many columns as fit,
     each at least 250px, sharing the leftover space equally. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.page {
  display: grid;
  grid-template-columns: 250px 1fr;    /* fixed sidebar, flexible content */
  grid-template-rows: auto 1fr auto;   /* header, body that fills, footer */
  min-height: 100vh;
}

1fr berarti "satu porsi dari ruang sisa" — padanan flex-grow: 1 di grid. minmax(250px, 1fr) berarti "jangan pernah di bawah 250px, selebihnya bagi rata".

Tugas praktik

Di DevTools pada halaman beranda proyek ini, temukan daftar modul dan grid statistiknya. Chrome menaruh lencana kecil flex atau grid di sebelah elemen seperti itu di panel Elements — klik untuk menampilkan garis dan jaraknya. Lalu ubah grid-template-columns secara langsung dan lihat ia menata ulang.

Hasil yang diharapkan

Overlay visual yang menampilkan track dan gap-nya.