cssflexboxalignmentMenengah5 mnt baca

Justify dan Align

justify-content (main axis), align-items (cross axis), dan align-content untuk multi-baris.

justify-content: sepanjang main axis

Mengatur distribusi item di sepanjang main axis:

css

.wadah {
  display: flex;
  justify-content: flex-start; /* default: rapat ke awal */
  /* center | flex-end | space-between | space-around | space-evenly */
}

space-between: item pertama di ujung kiri, terakhir di ujung kanan, sisa ruang dibagi rata di antara.
space-around: tiap item dapat ruang sama di kiri-kanannya.
space-evenly: semua jarak (termasuk tepi) sama persis.

align-items: sepanjang cross axis

Mengatur perataan item di cross axis:

css

.wadah {
  display: flex;
  align-items: stretch; /* default: item melar setinggi wadah */
  /* flex-start | center | flex-end | baseline */
}

align-items: center adalah cara modern menengahkan vertikal, menggantikan trik line-height zaman dulu.

align-content: untuk banyak baris

Hanya berpengaruh kalau flex-wrap: wrap dan ada lebih dari satu baris. Mengatur distribusi antar baris, mirip justify-content tapi untuk cross axis.

css

.wadah {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

Catatan teknis: kesalahan umum adalah memakai align-items untuk menengahkan wadah itu sendiri. align-items mengatur item di dalam wadah. Untuk menengahkan wadah di halaman, pakai margin auto atau flexbox pada induknya.

Rumus centering sempurna

Hafalkan pola ini, dipakai di mana-mana:

css

.tengah {
  display: flex;
  justify-content: center;
  align-items: center;
}

Cara mengingat: justify = jurusan (arah jalan)

Mnemonik: justify seperti "jurusan" bus: mengikuti ARAH PERJALANAN (main axis). align seperti "sejajar": menyejajarkan ke arah MELINTANG (cross axis). Atau ingat: justify-content untuk "justify" teks di Word yang mengatur arah baca.

Contoh: header kartu

css

.kartu-header {
  display: flex;
  justify-content: space-between; /* judul kiri, tombol kanan */
  align-items: center;            /* sejajar vertikal tengah */
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}

Pola paling umum di dunia: dua ujung + tengah vertikal.

Contoh: pagination tengah

css

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

Jebakan

space-between dengan satu item. Satu item akan menempel ke kiri (start), bukan tengah! Untuk satu item di tengah, pakai justify-content: center.

align-items: center memotong konten tinggi. Jika item lebih tinggi dari wadah, align-items: center bisa memotong bagian atas item (tidak bisa di-scroll). Untuk konten yang mungkin overflow, pakai margin: auto atau align-items: safe center (modern).

Tips profesional

Pola "satu item kiri, sisanya kanan": margin-right: auto pada item pertama lebih presisi daripada space-between.
align-items: baseline menyejajarkan teks beda ukuran pada garis dasarnya: berguna untuk harga + label kecil.
Untuk grup tombol rata kanan: display: flex; justify-content: flex-end; gap: 8px;. Satu baris, selesai.

Rangkuman

justify = main axis, align-items = cross axis (satu baris), align-content = cross axis (antar baris). Kombinasi justify-center + align-center = centering sempurna.

Live Playground

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

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

Tantangan

Bedakan Space-nya

Di playground:

Ubah .j3 menjadi space-around, amati bedanya dengan space-between.
Buat .j4 baru dengan space-evenly. Bandingkan ketiganya dan tulis di komentar perbedaannya.
Ubah .j2 agar item menempel ke bawah wadah (bukan tengah vertikal).

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