Halo teman-teman semuanya, setelah sebelumnya kita belajar tentang properti position, sekarang kita akan membahas cara menyusun elemen secara efisien dan fleksibel menggunakan Flexbox, salah satu teknik layout modern yang sangat powerful dalam CSS.
Dengan Flexbox, kita bisa menyusun elemen secara horizontal maupun vertikal, mengatur jarak antar elemen, membuat elemen rata tengah, hingga mengatur ukuran elemen secara responsif — tanpa ribet.
Apa Itu Flexbox?
Flexbox (singkatan dari Flexible Box) adalah metode layout satu dimensi yang memudahkan pengaturan elemen dalam satu baris (row) atau satu kolom (column).
Untuk menggunakan Flexbox, kita perlu mengatur elemen container-nya dengan properti:
display: flex;
Setelah itu, semua elemen di dalamnya menjadi flex item, dan kita bisa mengaturnya menggunakan berbagai properti Flexbox.
1. Display: flex
Digunakan pada elemen induk (container) untuk mengaktifkan Flexbox.
.container {
display: flex;
}
2. Flex-direction
Menentukan arah penyusunan elemen.
.container {
flex-direction: row; /* default: horizontal */
flex-direction: column; /* vertikal */
}
3. Justify-content
Mengatur posisi elemen secara horizontal (dalam arah utama).
Nilai umum:
flex-start – mulai dari kiricenter – rata tengahflex-end – rata kananspace-between – ruang di antara elemenspace-around – ruang di sekitar elemen
.container {
justify-content: center;
}
4. Align-items
Mengatur perataan elemen secara vertikal (jika arah row).
Nilai umum:
stretch (default)flex-startcenterflex-end
.container {
align-items: center;
}
5. Gap
Memberi jarak antar elemen tanpa perlu margin.
.container {
gap: 20px;
}
Contoh Lengkap
Berikut contoh layout horizontal dengan Flexbox yang meratakan item ke tengah dan memberi jarak di antaranya.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Flexbox Dasar</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
background-color: #f8f9fa;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
height: 200px;
background-color: #eee;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
Tiga kotak disusun horizontal dengan Flexbox, diratakan di tengah halaman secara horizontal dan vertikal. Properti gap digunakan untuk memberi jarak antar kotak tanpa harus menambahkan margin satu per satu.
Kesimpulan
Flexbox adalah teknik layout modern yang mempermudah penyusunan elemen dalam satu dimensi — baik secara horizontal maupun vertikal.
Dengan properti seperti flex-direction, justify-content, align-items, dan gap, kita bisa membangun layout yang rapi, fleksibel, dan responsif tanpa banyak kode tambahan.
Di materi selanjutnya, kita akan membahas tentang CSS Grid Layout, teknik layout dua dimensi yang cocok untuk membuat tampilan seperti galeri, dashboard, atau struktur kolom-baris yang kompleks.
Terima Kasih