Setelah mempelajari justify-content untuk perataan pada sumbu utama, sekarang saatnya memahami perataan pada sumbu silang (cross axis). Dua properti penting dalam Flexbox untuk mengatur posisi vertikal (jika flex-direction: row) atau horizontal (jika flex-direction: column) adalah align-items dan align-content. Meskipun mirip, keduanya memiliki fungsi yang berbeda.
Perbedaan align-items vs align-content
| Aspek | align-items | align-content |
|---|
Catatan: Jika hanya satu baris,
align-content tidak berpengaruh. Gunakan align-items untuk satu baris, align-content untuk multi-baris (dengan flex-wrap: wrap).
1. align-items (Perataan Satu Baris)
align-items mengatur posisi item-item dalam satu baris pada sumbu silang (cross axis). Nilai yang tersedia:
stretch(default) → item meregang memenuhi tinggi container.flex-start→ item di awal sumbu silang (atas untuk row).flex-end→ item di akhir sumbu silang (bawah untuk row).center→ item di tengah sumbu silang.baseline→ item sejajar berdasarkan garis teks.
Contoh align-items:
<style>
.flex-container {
display: flex;
background: #f0f4f8;
height: 150px;
margin: 10px 0;
padding: 10px;
gap: 10px;
}
.item {
background: #3b82f6;
color: white;
padding: 10px;
width: 80px;
text-align: center;
}
.item:nth-child(2) { padding: 20px 10px; } /* beda tinggi */
.align-stretch { align-items: stretch; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
</style>
<div class="flex-container align-stretch">
<div class="item">Item 1</div>
<div class="item">Item 2 (padding)</div>
<div class="item">Item 3</div>
</div>
<div class="flex-container align-start">...</div>
stretch (default)
Item 1
Item 2
Item 3
flex-start
1
2
3
center
1
2
3
flex-end
1
2
3
2. align-content (Perataan Multi Baris)
align-content mengatur jarak antar baris ketika terdapat multiple baris (karena flex-wrap: wrap). Tidak berpengaruh jika hanya satu baris. Nilai yang tersedia:
stretch(default) → baris meregang memenuhi container.flex-start→ baris berkumpul di awal sumbu silang.flex-end→ baris berkumpul di akhir.center→ baris di tengah.space-between→ baris pertama di awal, terakhir di akhir, jarak merata.space-around→ ruang di sekitar setiap baris merata.space-evenly→ ruang antar baris, awal, akhir sama.
Contoh align-content (perhatikan flex-wrap: wrap):
<style>
.flex-wrap-container {
display: flex;
flex-wrap: wrap;
background: #f0f4f8;
height: 250px;
width: 300px;
margin: 10px;
padding: 10px;
gap: 8px;
}
.wrap-item {
background: #3b82f6;
color: white;
padding: 15px;
width: 80px;
text-align: center;
}
.content-start { align-content: flex-start; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
</style>
flex-start
1
2
3
4
center
1
2
3
4
space-between
1
2
3
4
align-content mengatur jarak antar baris pada flex-wrap: wrap. Perhatikan perbedaan posisi baris dalam container.
Contoh Proyek: Card Grid dengan align-items dan align-content
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items & align-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;
}
.flex-row {
display: flex;
background: #eef2ff;
height: 150px;
margin: 10px 0;
padding: 10px;
gap: 10px;
}
.flex-row-item {
background: #3b82f6;
color: white;
padding: 10px;
width: 100px;
text-align: center;
}
.flex-wrap-demo {
display: flex;
flex-wrap: wrap;
background: #eef2ff;
height: 200px;
width: 100%;
margin: 10px 0;
padding: 10px;
gap: 10px;
}
.wrap-item {
background: #22c55e;
color: white;
padding: 15px;
width: 100px;
text-align: center;
}
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.content-start { align-content: flex-start; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.info-box {
background: #eef2ff;
padding: 20px;
border-radius: 12px;
margin-top: 30px;
}
code {
background: #e2e8f0;
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
}
</style>
</head>
<body>
<div class="container">
<h1>align-items vs align-content</h1>
<div class="demo-section">
<h2>1. align-items (satu baris)</h2>
<div class="flex-row align-start">
<div class="flex-row-item">flex-start</div>
<div class="flex-row-item" style="padding: 25px 10px;">Item tinggi</div>
<div class="flex-row-item">3</div>
</div>
<div class="flex-row align-center">
<div class="flex-row-item">center</div>
<div class="flex-row-item" style="padding: 25px 10px;">Item tinggi</div>
<div class="flex-row-item">3</div>
</div>
<div class="flex-row align-end">
<div class="flex-row-item">flex-end</div>
<div class="flex-row-item" style="padding: 25px 10px;">Item tinggi</div>
<div class="flex-row-item">3</div>
</div>
</div>
<div class="demo-section">
<h2>2. align-content (multi baris, flex-wrap: wrap)</h2>
<div class="flex-wrap-demo content-start">
<div class="wrap-item">1</div><div class="wrap-item">2</div><div class="wrap-item">3</div><div class="wrap-item">4</div>
</div>
<p>align-content: flex-start (baris di awal)</p>
<div class="flex-wrap-demo content-center">
<div class="wrap-item">1</div><div class="wrap-item">2</div><div class="wrap-item">3</div><div class="wrap-item">4</div>
</div>
<p>align-content: center (baris di tengah)</p>
<div class="flex-wrap-demo content-between">
<div class="wrap-item">1</div><div class="wrap-item">2</div><div class="wrap-item">3</div><div class="wrap-item">4</div>
</div>
<p>align-content: space-between (jarak antar baris merata)</p>
</div>
<div class="info-box">
<h3>Ringkasan Perbedaan</h3>
<ul>
<li><code>align-items</code> → perataan item dalam SATU BARIS (sumbu silang).</li>
<li><code>align-content</code> → perataan JARAK ANTAR BARIS pada multi-baris (<code>flex-wrap: wrap</code>).</li>
<li>Jika hanya satu baris, align-content tidak berpengaruh.</li>
<li>Keduanya bekerja pada sumbu silang (cross axis), tergantung <code>flex-direction</code>.</li>
</ul>
</div>
</div>
</body>
</html>
Hasil visual demo:
align-items center
Item
Tinggi
align-content space-between (wrap)
1
2
3
4
Kesalahan Umum
- Mengira align-content bekerja pada satu baris → tidak, butuh flex-wrap: wrap.
- Tertukar fungsi align-items dan justify-content (sumbu berbeda).
- Lupa memberi tinggi container untuk align-items/align-content terlihat.
Latihan Singkat
- Buat flex container dengan 3 item, atur align-items: center, lihat perataan vertikal.
- Buat container dengan flex-wrap: wrap, 6 item, atur align-content: space-between.
- Coba gabungkan justify-content: center dan align-items: center untuk memusatkan elemen.
- Ubah flex-direction menjadi column, lalu amati perubahan sumbu pada align-items.
Intisari Hari Ini
- align-items → perataan item pada sumbu silang (satu baris).
- align-content → perataan jarak antar baris (multi-baris, dengan flex-wrap: wrap).
- Keduanya penting untuk layout vertikal/horizontal yang rapi.
- Gunakan align-items: center untuk memusatkan item dalam baris (misal navbar).
Tantangan: Buat halaman profil dengan foto, nama, dan deskripsi. Gunakan flexbox untuk menyusun elemen secara vertikal di tengah (align-items: center). Buat juga grid produk dengan flex-wrap, gunakan align-content: space-between untuk mengatur jarak antar baris produk.
Artikel Sebelumnya: CSS Dasar #24 - justify-content
Artikel Selanjutnya: CSS Dasar #26 - flex-wrap, flex-flow, dan gap