Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Mengaktifkan flexbox dengan
display: flex - Mengatur arah, perataan, dan distribusi item dengan properti flex
- Membuat layout dua kolom sederhana
Materi Singkat
Sebelum flexbox ada, membuat layout di CSS sangat rumit dan penuh hack. Flexbox hadir dan mengubah segalanya. Sekarang membuat elemen sejajar, terpusat, atau terdistribusi merata jadi mudah.
Konsep Dasar
Flexbox bekerja dengan dua peran:
- Flex Container — elemen yang diberi
display: flex(sang "bos") - Flex Items — elemen anak langsung di dalam container (para "bawahan")
<div class="container"> <!-- flex container -->
<div class="item">A</div> <!-- flex item -->
<div class="item">B</div> <!-- flex item -->
<div class="item">C</div> <!-- flex item -->
</div>.container {
display: flex; /* aktifkan flexbox */
}Sekarang A, B, C otomatis berjajar horizontal!
Properti pada Flex Container
flex-direction — arah item berjajar:
flex-direction: row; /* kiri ke kanan (default) */
flex-direction: row-reverse; /* kanan ke kiri */
flex-direction: column; /* atas ke bawah */
flex-direction: column-reverse;justify-content — distribusi item di sumbu utama (horizontal jika row):
justify-content: flex-start; /* kiri (default) */
justify-content: flex-end; /* kanan */
justify-content: center; /* tengah */
justify-content: space-between; /* jarak merata, tanpa sisi */
justify-content: space-around; /* jarak merata, dengan sisi */
justify-content: space-evenly; /* jarak persis sama */align-items — perataan item di sumbu silang (vertikal jika row):
align-items: stretch; /* regangkan ke penuh (default) */
align-items: flex-start; /* atas */
align-items: flex-end; /* bawah */
align-items: center; /* tengah vertikal */gap — jarak antar item:
gap: 16px; /* semua sisi */
gap: 16px 24px; /* vertikal | horizontal */flex-wrap — item melanjut ke baris baru jika tidak muat:
flex-wrap: nowrap; /* tidak wrap (default) */
flex-wrap: wrap; /* wrap ke baris baru */Properti pada Flex Item
flex — cara item tumbuh dan menyusut:
flex: 1; /* item mengisi sisa ruang secara merata */
flex: 2; /* item mengisi dua kali lebih besar dari flex: 1 */
flex: none; /* ukuran tetap */Contoh Kode
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Layout dua kolom: konten + sidebar -->
<div class="page-layout">
<main class="konten">
<h1>Konten Utama</h1>
<p>Ini adalah area konten utama yang lebih lebar.</p>
<p>Flexbox membuat layout dua kolom ini sangat mudah dibuat.</p>
</main>
<aside class="sidebar">
<h2>Sidebar</h2>
<p>Info tambahan ada di sini.</p>
</aside>
</div>
<!-- Kartu-kartu yang otomatis wrap -->
<div class="kartu-grid">
<div class="kartu">HTML Dasar</div>
<div class="kartu">CSS Dasar</div>
<div class="kartu">JavaScript Dasar</div>
<div class="kartu">Responsive Design</div>
</div>
</body>
</html>*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: sans-serif;
padding: 24px;
background: #f5f5f5;
}
/* Layout dua kolom */
.page-layout {
display: flex;
gap: 24px;
margin-bottom: 32px;
align-items: flex-start;
}
.konten {
flex: 3; /* mengambil 3/4 dari ruang */
background: white;
padding: 24px;
border-radius: 8px;
}
.sidebar {
flex: 1; /* mengambil 1/4 dari ruang */
background: white;
padding: 24px;
border-radius: 8px;
}
/* Grid kartu dengan wrap */
.kartu-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.kartu {
flex: 1;
min-width: 150px;
background: white;
padding: 20px;
border-radius: 8px;
border: 1px solid #e5e7eb;
text-align: center;
font-weight: 600;
color: #2563eb;
}Tugas Kecil
Perbarui halaman profilmu agar pakai flexbox:
- Header — gunakan flexbox untuk menaruh nama di kiri dan navigasi di kanan:
header { display: flex; justify-content: space-between; align-items: center; } - Section Keahlian — tampilkan daftar skill sebagai badge yang berjajar dalam grid:
- Bungkus semua badge dalam
<div class="skill-grid"> display: flex; flex-wrap: wrap; gap: 8px
- Bungkus semua badge dalam
- Section Foto — taruh foto dan teks bio berdampingan:
display: flex; gap: 24px; align-items: flex-start- Foto tidak perlu flex (biarkan ukurannya tetap), teks pakai
flex: 1