cssflexboxlayoutMenengah5 mnt baca

Properti Flex Item

flex-grow, flex-shrink, flex-basis, shorthand flex, order, dan align-self.

Tiga properti ukuran item

flex-grow: berapa bagian ruang sisa yang diambil. flex-grow: 1 = ambil semua sisa. flex-grow: 2 = ambil dua kali lipat dari yang grow-nya 1.
flex-shrink: berapa agresif item menyusut saat sempit. flex-shrink: 0 = jangan susutkan aku.
flex-basis: ukuran awal sebelum grow/shrink dihitung. Mirip width tapi untuk sumbu flex.

css

.sidebar { flex: 0 0 250px; }  /* tetap 250px, jangan grow/shrink */
.konten  { flex: 1; }          /* ambil semua sisa ruang */

Shorthand flex

css

.item {
  flex: 1;              /* = 1 1 0% : grow, boleh susut, basis 0 */
  flex: auto;           /* = 1 1 auto : basis dari konten */
  flex: none;           /* = 0 0 auto : ukuran natural, kaku */
  flex: 0 0 200px;      /* kaku 200px */
}

flex: 1 adalah pola paling sering: "bagi ruang sisa sama rata".

order dan align-self

css

.item-penting {
  order: -1; /* tampil paling depan tanpa ubah HTML */
}

.item-khusus {
  align-self: flex-end; /* override align-items hanya untuk item ini */
}

order mengubah urutan visual saja. Peringatan aksesibilitas: screen reader dan navigasi keyboard tetap mengikuti urutan HTML, jadi jangan pakai order untuk mengubah makna urutan konten.

Catatan teknis: flex-basis: 0 vs auto sering membingungkan. Dengan flex: 1 (basis 0), ruang dibagi murni proporsional terhadap grow. Dengan flex: auto (basis auto), ukuran konten ikut diperhitungkan dulu. Untuk kolom sama lebar persis, pakai flex: 1.

Mnemonik grow/shrink/basis

grow = "tumbuh": berebut ruang SISA (seperti tanaman berebut sinar).
shrink = "susut": mengalah saat SEMPIT (seperti spons diperas).
basis = "modal awal": ukuran sebelum berebut/mengalah.

Contoh: input + tombol (pola search bar)

css

.search-bar {
  display: flex;
  gap: 8px;
}

.search-bar input {
  flex: 1; /* input melar mengisi sisa */
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.search-bar button {
  flex: 0 0 auto; /* tombol seukuran kontennya */
  padding: 10px 20px;
}

Pola universal: satu elemen melar, sisanya kaku.

css

.layout {
  display: flex;
}

.sidebar {
  flex: 0 0 240px; /* selalu 240px */
}

.konten {
  flex: 1;         /* sisanya */
  min-width: 0;    /* PENTING: izinkan menyusut di bawah kontennya */
}

Jebakan

Lupa min-width: 0. Flex item tidak bisa menyusut di bawah ukuran konten minimumnya (misal teks panjang tanpa spasi). min-width: 0 (atau overflow: hidden) mengizinkannya. Ini bug klasik "flex item meluber".

flex: 1 vs flex: auto. flex: 1 (basis 0): bagi rata murni. flex: auto (basis auto): ukuran konten ikut dihitung dulu. Untuk kolom sama persis: flex: 1.

Tips profesional

Hafalkan tiga shorthand: flex: 1 (melar), flex: none (kaku), flex: 0 0 240px (kaku berukuran). Tiga ini mencakup 95% kebutuhan.
order boleh negatif: order: -1 memajukan item ke paling depan tanpa mengubah HTML.
align-self: stretch (default) membuat item setinggi wadah; align-self: flex-start membuatnya setinggi kontennya.

Rangkuman

flex-grow/shrink/basis mengatur perilaku ukuran item, flex sebagai shorthand-nya. order untuk urutan visual, align-self untuk pengecualian alignment. Hafalkan flex: 1 dan flex: 0 0 Npx.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Layout 3 Kolom Klasik

Di playground ada layout sidebar-konten-sidebar:

Buat sidebar kiri tidak bisa menyusut tapi sidebar kanan boleh menyusut (ubah flex-shrink salah satunya).
Tukar urutan visual: konten tampil pertama tanpa mengubah HTML (pakai order).
Buat konten selalu minimal 300px walau ruang sempit memakai flex-basis. Jelaskan di komentar bedanya dengan width.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox