Setelah memahami display: block, inline, dan inline-block, kini kita masuk ke level layout modern, yaitu Flexbox.
Flexbox dirancang untuk mempermudah pengaturan:
-
posisi elemen (kiri, kanan, tengah)
-
arah elemen (horizontal / vertikal)
-
jarak antar elemen
-
pembungkusan elemen saat layar sempit
Karena itu, Flexbox sangat sering dipakai di website modern.
Apa Itu Display: Flex?
display: flex mengubah sebuah elemen menjadi flex container,
dan semua anak langsungnya menjadi flex items.
.container {
display: flex;
}
Begitu flex aktif:
-
elemen anak otomatis sejajar ke kanan
-
tidak turun ke bawah seperti
block
Inilah perubahan besar dari display biasa.
Contoh Awal Flexbox
HTML
<section class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</section>
CSS
.container {
display: flex;
width: 600px;
border: 2px solid black;
}
.box {
width: 100px;
height: 100px;
background: tomato;
margin: 5px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
📌 Hasilnya:
Semua kotak berjejer ke kanan, meskipun sebelumnya turun ke bawah.
Flex Direction: Mengatur Arah Elemen
Secara default:
flex-direction: row;
Artinya:
➡️ kiri → kanan (1 2 3 4 5)
Opsi Flex Direction
flex-direction: row; /* kiri ke kanan */
flex-direction: row-reverse;/* kanan ke kiri */
flex-direction: column; /* atas ke bawah */
flex-direction: column-reverse;
📌 Kalau ingin elemen turun ke bawah, cukup:
flex-direction: column;
Flex Wrap: Saat Elemen Tidak Muat
Secara default:
flex-wrap: nowrap;
Artinya:
➡️ elemen dipaksa tetap satu baris, meskipun jadi gepeng.
Aktifkan Wrap
flex-wrap: wrap;
📌 Efeknya:
-
elemen yang tidak muat pindah ke baris bawah
-
layout jadi lebih fleksibel
Contoh Flex Wrap Nyata
.container {
display: flex;
flex-wrap: wrap;
width: 400px;
}
➡️ Hasil:
1 2 3 4 5
Tanpa wrap:
1 2 3 4 5 (gepeng)
Justify-Content: Posisi Horizontal
justify-content mengatur arah horizontal (main axis).
Nilai-Nilai Penting
justify-content: flex-start; /* kiri */
justify-content: center; /* tengah */
justify-content: flex-end; /* kanan */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
Perbedaan Space
| Value | Ciri |
|---|---|
| space-between | jarak di tengah saja |
| space-around | jarak pinggir lebih kecil |
| space-evenly | semua jarak sama rata |
📌 Dari penjelasan kamu:
space-evenly → paling rapi & seimbang
Align-Items: Posisi Vertikal
align-items mengatur arah vertikal (cross axis).
Contoh
align-items: center;
➡️ Semua kotak tengah secara vertikal
Nilai Umum
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch;
📌 Catatan penting:
-
align-itemsbutuh tinggi container -
tanpa
height, efeknya terlihat minim
Kombinasi Paling Sering Dipakai
.container {
display: flex;
justify-content: center;
align-items: center;
}
➡️ Elemen tengah horizontal & vertikal
Ini adalah pola paling populer di Flexbox.
Flexbox vs Display Biasa
| Fitur | Display Biasa | Flexbox |
|---|---|---|
| Sejajarkan elemen | Sulit | Mudah |
| Tengah horizontal | Ribet | Mudah |
| Tengah vertikal | Susah | Sangat mudah |
| Responsive | Manual | Natural |
Kenapa Flexbox Sangat Penting?
Karena:
-
Navbar
-
Card layout
-
Button group
-
Centering elemen
-
Responsive UI
➡️ semuanya lebih mudah dengan Flexbox
Kalau display biasa = batu bata
maka Flexbox = LEGO 🔧
Ringkasan Properti Flexbox Dasar
| Properti | Fungsi |
|---|---|
| display: flex | Aktifkan Flexbox |
| flex-direction | Arah elemen |
| flex-wrap | Pindah baris |
| justify-content | Horizontal |
| align-items | Vertikal |
Ilustrasi CSS Flexbox (Visual Pendukung)
4
Penutup
Flexbox adalah jembatan antara CSS dasar dan layout modern.
Kalau Flexbox sudah paham:
➡️ belajar Grid
➡️ responsive design
➡️ UI modern
akan jauh lebih mudah.
