cssflexboxlayoutMenengah5 mnt baca

Flex Container

Memulai flexbox: display flex, flex-direction, dan main axis vs cross axis.

Mengaktifkan flexbox

Satu baris mengubah segalanya:

css

.wadah {
  display: flex;
}

Anak-anak langsungnya (flex items) otomatis tersusun sebaris horizontal. Elemen yang tadinya block dan memenuhi baris kini berdampingan.

flex-direction: arah susunan

css

.wadah {
  display: flex;
  flex-direction: row; /* default: kiri ke kanan */
  /* row-reverse | column | column-reverse */
}

column menyusun vertikal, cocok untuk kartu atau form. Nilai reverse membalik urutan visual tanpa mengubah HTML (hati-hati: urutan baca screen reader tetap mengikuti HTML).

Dua sumbu: main dan cross

Ini konsep kunci flexbox:

Main axis: arah susunan item (ditentukan flex-direction).
Cross axis: arah tegak lurusnya.

Kalau flex-direction: row, main axis = horizontal, cross axis = vertikal. Kalau column, keduanya bertukar. Semua properti alignment (justify-* vs align-*) mengacu ke sumbu ini, bukan ke "horizontal/vertikal" secara mutlak.

css

/* justify = sepanjang main axis */
/* align = sepanjang cross axis */

Catatan teknis: flex item secara default tidak wrap dan akan menyusut (flex-shrink) agar muat satu baris. Kalau item terlihat gepeng, itu bukan bug: flexbox sedang memampatkannya. Atur dengan flex-wrap atau properti item (modul berikutnya).

Kenapa flex-direction penting dipahami dulu?

Karena SEMUA properti alignment (justify, align) mengacu ke main/cross axis, bukan ke horizontal/vertikal. Salah paham axis = salah pakai properti = frustrasi "kenapa tidak bergerak?".

css

.toolbar {
  display: flex;
  flex-direction: column; /* susun ke bawah */
  gap: 8px;
  padding: 12px;
  background: #0f172a;
  border-radius: 12px;
}

.toolbar button {
  background: #1e293b;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
}

Dengan column, main axis = vertikal: justify-content kini mengatur jarak vertikal!

Contoh: reverse untuk RTL/breadcrumb

css

/* Breadcrumb dengan pemisah otomatis */
.breadcrumb {
  display: flex;
  flex-direction: row-reverse; /* item pertama di kanan */
  justify-content: flex-end;
}

Jebakan

Lupa flex item menyusut. Item dengan teks panjang akan gepeng agar muat sebaris. Kalau item tidak boleh menyusut: flex-shrink: 0.

100vh + column + justify-center. Pola hero vertikal: min-height: 100vh; flex-direction: column; justify-content: center; menengahkan konten vertikal di layar penuh.

Tips profesional

Hafalkan: display: flex membuat anak langsung menjadi flex item; cucu TIDAK ikut (perlu display flex sendiri bila ingin).
Untuk daftar vertikal sederhana, flex-direction: column + gap menggantikan margin antar item yang rawan collapse.
flex-direction: row-reverse membalik visual TANPA mengubah urutan baca screen reader: jangan pakai untuk mengubah makna urutan konten.

Rangkuman

display: flex + flex-direction. Pahami main axis vs cross axis karena semua alignment mengacu ke sana. Ingat: default tidak wrap dan item bisa menyusut.

Live Playground

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

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

Tantangan

Ubah Arahnya

Di playground:

Ubah .baris menjadi row-reverse, amati urutan 3-2-1 tanpa mengubah HTML.
Buat .kolom menjadi column-reverse.
Di komentar, jelaskan apa itu main axis dan cross axis saat flex-direction: column.

<!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