Setelah kita mempelajari dasar Flexbox dan flex-direction, sekarang saatnya memahami justify-content. Properti ini mengatur perataan item pada sumbu utama (main axis). Dengan justify-content, kita bisa mengatur posisi item di dalam flex container, termasuk memberi jarak yang merata antar item.
Apa Itu justify-content?
justify-content adalah properti CSS untuk flexbox yang mengatur perataan dan distribusi ruang di antara flex item pada sumbu utama (main axis). Arah sumbu utama ditentukan oleh flex-direction (default: horizontal).
Nilai-nilai justify-content:
-
-
-
-
-
-
-
flex-start → item dikumpulkan di awal sumbu utama (default).
-
flex-end → item dikumpulkan di akhir sumbu utama.
-
center → item dikumpulkan di tengah sumbu utama.
-
space-between → item pertama di awal, terakhir di akhir, sisanya merata.
-
space-around → ruang di sekitar setiap item merata.
-
space-evenly → ruang antar item, di awal, dan di akhir sama besar.
1. flex-start (default)
Item dikumpulkan di awal sumbu utama (kiri untuk row, atas untuk column).
Contoh:
<style>
.container {
display: flex;
justify-content: flex-start;
background: #f0f4f8;
padding: 15px;
margin: 10px 0;
}
.item {
background: #3b82f6;
color: white;
padding: 15px;
margin: 5px;
border-radius: 8px;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
1
2
3
justify-content: flex-start (item di kiri)
2. flex-end
Item dikumpulkan di akhir sumbu utama (kanan untuk row, bawah untuk column).
<div style="display: flex; justify-content: flex-end; background: #f0f4f8; padding: 15px;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
1
2
3
justify-content: flex-end (item di kanan)
3. center
Item dikumpulkan di tengah sumbu utama.
<div style="display: flex; justify-content: center; background: #f0f4f8; padding: 15px;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
1
2
3
justify-content: center (item di tengah)
4. space-between
Item pertama di awal, item terakhir di akhir, dan ruang antar item merata. Tidak ada ruang di awal/akhir.
<div style="display: flex; justify-content: space-between; background: #f0f4f8; padding: 15px;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
1
2
3
justify-content: space-between (item pertama dan terakhir di tepi)
5. space-around
Ruang di sekitar setiap item merata. Ruang di kiri dan kanan item sama besar.
<div style="display: flex; justify-content: space-around; background: #f0f4f8; padding: 15px;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
1
2
3
justify-content: space-around (ruang di sekitar item sama)
6. space-evenly
Ruang antar item, di awal, dan di akhir semuanya sama besar.
<div style="display: flex; justify-content: space-evenly; background: #f0f4f8; padding: 15px;">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
1
2
3
justify-content: space-evenly (ruang antar item, kiri, kanan sama)
Perbandingan Semua Nilai justify-content
| Nilai | Visualisasi (2 item) | Kapan Pakai |
|---|---|---|
flex-start |
[1][2]_______________ | Default, item di kiri |
flex-end |
_______________[1][2] | Item di kanan |
center |
______[1][2]_______ | Item di tengah |
space-between |
[1]_______[2] | Item tepi kiri/kanan, jarak merata |
space-around |
___[1]___[2]___ | Ruang di sekitar item sama |
space-evenly |
___[1]___[2]___ (termasuk tepi) | Semua ruang sama besar |
Contoh Proyek: Layout dengan Berbagai justify-content
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>justify-content - Demo Flexbox</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f4f8;
padding: 40px 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
h1 {
text-align: center;
margin-bottom: 10px;
}
.demo-section {
margin: 30px 0;
padding: 15px;
background: #f8fafc;
border-radius: 12px;
}
.demo-title {
font-weight: bold;
margin-bottom: 10px;
color: #1e293b;
}
.flex-demo {
display: flex;
background: #eef2ff;
padding: 15px;
border-radius: 8px;
margin: 10px 0;
}
.flex-item {
background: #3b82f6;
color: white;
padding: 15px;
border-radius: 8px;
width: 80px;
text-align: center;
}
.flex-start { justify-content: flex-start; }
.flex-end { justify-content: flex-end; }
.center { justify-content: center; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.info-box {
background: #eef2ff;
padding: 20px;
border-radius: 12px;
margin-top: 30px;
}
.info-box code {
background: #e2e8f0;
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
}
hr {
margin: 20px 0;
border: none;
border-top: 1px solid #e2e8f0;
}
@media (max-width: 600px) {
.flex-item { width: 60px; padding: 10px; }
}
</style>
</head>
<body>
<div class="container">
<h1>justify-content pada Flexbox</h1>
<div class="demo-section">
<div class="demo-title">1. flex-start (default)</div>
<div class="flex-demo flex-start">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<p>Item dikumpulkan di awal sumbu utama (kiri).</p>
</div>
<div class="demo-section">
<div class="demo-title">2. flex-end</div>
<div class="flex-demo flex-end">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<p>Item dikumpulkan di akhir sumbu utama (kanan).</p>
</div>
<div class="demo-section">
<div class="demo-title">3. center</div>
<div class="flex-demo center">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<p>Item dikumpulkan di tengah sumbu utama.</p>
</div>
<div class="demo-section">
<div class="demo-title">4. space-between</div>
<div class="flex-demo space-between">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<p>Item pertama di awal, terakhir di akhir, sisanya merata.</p>
</div>
<div class="demo-section">
<div class="demo-title">5. space-around</div>
<div class="flex-demo space-around">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<p>Ruang di sekitar setiap item merata.</p>
</div>
<div class="demo-section">
<div class="demo-title">6. space-evenly</div>
<div class="flex-demo space-evenly">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<p>Ruang antar item, di awal, dan di akhir sama besar.</p>
</div>
Ringkasan justify-content
flex-start → item di awal (default).flex-end → item di akhir.center → item di tengah.space-between → item pertama di awal, terakhir di akhir, jarak merata.space-around → ruang di sekitar setiap item merata.space-evenly → semua ruang (antar, kiri, kanan) sama besar.
💡 Tips: justify-content bekerja pada sumbu utama (ditentukan oleh flex-direction). Untuk perataan vertikal, gunakan align-items (akan dipelajari di artikel selanjutnya).
</body>
</html>
Hasil visual demo:
Kesalahan Umum Pemula
- Lupa bahwa justify-content hanya bekerja pada flex container → Pastikan container sudah diberi
display: flex. - Mengira justify-content untuk sumbu silang → justify-content untuk sumbu utama (main axis). Untuk sumbu silang (cross axis) gunakan align-items.
- Tidak memahami perbedaan space-between, space-around, space-evenly → Lihat visualisasi di atas untuk memahami perbedaan.
- Menggunakan justify-content pada flex-direction: column → Maka sumbu utama menjadi vertikal, justify-content akan mengatur posisi atas-bawah.
Debugging Tips:
- Gunakan Developer Tools (F12) untuk melihat nilai justify-content yang aktif.
- Beri background dan border pada flex container dan item untuk melihat distribusi ruang.
- Ubah nilai justify-content satu per satu untuk melihat perbedaan secara langsung.
Latihan Singkat
- Buat flex container dengan 4 item, coba semua nilai justify-content. Amati perbedaannya.
- Buat navbar dengan logo di kiri dan menu di kanan (gunakan space-between).
- Buat galeri 3 gambar dengan jarak merata (gunakan space-evenly).
- Buat flex container dengan flex-direction: column, lalu coba justify-content: center. Amati item di tengah vertikal.
- Coba kombinasi justify-content dan flex-wrap pada container dengan item yang banyak.
Intisari Hari Ini
- justify-content mengatur perataan item pada sumbu utama flexbox.
- Nilai: flex-start, flex-end, center, space-between, space-around, space-evenly.
- space-between → item pertama di awal, terakhir di akhir.
- space-around → ruang di sekitar setiap item merata.
- space-evenly → ruang antar item, awal, akhir semuanya sama.
- Perhatikan arah sumbu utama (flex-direction) saat menggunakan justify-content.
Tantangan: Buat sebuah Halaman Landing Page dengan beberapa section yang menggunakan berbagai nilai justify-content! Persyaratan:
Selamat mencoba!
- Section 1: hero section dengan teks dan tombol di tengah (justify-content: center).
- Section 2: daftar fitur dengan 3 kartu yang menggunakan space-between.
- Section 3: galeri mitra dengan 4 logo menggunakan space-around.
- Section 4: testimoni dengan 2 kartu menggunakan space-evenly.
- Footer dengan copyright di kiri dan sosial media di kanan (space-between).
- Setiap section memiliki title dan penjelasan nilai justify-content yang digunakan.
- Buat website responsif dengan media query (untuk HP, justify-content menjadi center atau flex-direction column).
Selamat mencoba!
Artikel Sebelumnya: CSS Dasar #23 - Pengenalan Flexbox: display: flex, flex-direction
Artikel Selanjutnya: CSS Dasar #25 - align-items dan align-content