Tutorial Lengkap Flexbox CSS: Konsep, Properti, dan Contoh

Dalam pengembangan web modern, Flexbox CSS menjadi salah satu alat utama untuk membuat layout yang fleksibel dan responsif tanpa menggunakan float atau positioning manual. Melalui panduan tutorial lengkap Flexbox CSS ini, kamu akan mempelajari konsep, fungsi, dan cara menggunakannya untuk menata elemen dengan efisien.

Baca juga: Belajar CSS Float dan Clear untuk Mengatur Layout

Apa Itu Flexbox CSS?

Flexbox CSS (Flexible Box Layout) adalah model layout di CSS yang memungkinkan pengembang untuk menyusun dan mengatur elemen dalam satu arah — baik horizontal (baris) maupun vertikal (kolom) — secara fleksibel.

Dengan Flexbox, kamu bisa:

• Menyusun elemen secara sejajar atau rata tengah dengan mudah.
• Mengatur jarak antar elemen tanpa kalkulasi margin rumit.
• Menciptakan layout responsif dengan lebih efisien.

Contoh dasar penggunaan:

.container {
    display: flex;
}Code language: CSS (css)

Kode di atas mengaktifkan flexbox css pada elemen dengan class .container.

Setiap elemen di dalamnya menjadi flex items yang bisa diatur dengan berbagai properti.

Konsep Dasar Flexbox CSS

Flexbox memiliki dua komponen utama:

1. Flex Container → Elemen induk yang diberi display: flex;
2. Flex Items → Elemen anak di dalam container yang akan diatur oleh sistem flexbox.

Struktur HTML sederhana:

<div class="container">
    <div class="item">Satu</div>
    <div class="item">Dua</div>
    <div class="item">Tiga</div>
</div>Code language: HTML, XML (xml)

.container {
    display: flex;
    background-color: #f0f0f0;
}
.item {
    background: #007acc;
    color: white;
    padding: 20px;
    margin: 10px;
}Code language: CSS (css)

Properti Utama Flexbox CSS

1. display: flex;

Mengubah elemen menjadi flex container, dan anak-anaknya menjadi flex items.

.container {
    display: flex;
}Code language: CSS (css)

2. flex-direction

Menentukan arah utama elemen (horizontal atau vertikal).

Nilai	Deskripsi
row	Default, elemen diatur dari kiri ke kanan
row-reverse	Dari kanan ke kiri
column	Dari atas ke bawah
column-reverse	Dari bawah ke atas

.container {
    flex-direction: row;
}Code language: CSS (css)

3. justify-content

Mengatur posisi elemen secara horizontal di sepanjang sumbu utama.

Nilai	Deskripsi
flex-start	Elemen mulai dari kiri
center	Elemen di tengah
flex-end	Elemen di kanan
space-between	Ruang rata antara item
space-around	Ruang di sekitar item

.container {
    justify-content: space-between;
}Code language: CSS (css)

4. align-items

Mengatur posisi elemen secara vertikal di sumbu silang.

Nilai	Deskripsi
flex-start	Elemen dirapatkan ke atas
center	Elemen di tengah secara vertikal
flex-end	Elemen dirapatkan ke bawah
stretch	Elemen menyesuaikan tinggi kontainer

.container {
    align-items: center;
}Code language: CSS (css)

5. flex-wrap

Mengatur apakah elemen akan membungkus ke baris berikutnya jika ruang tidak cukup.

.container {
    flex-wrap: wrap;
}Code language: CSS (css)

Kombinasi flex-wrap dan flex-direction dapat dikontrol dengan flex-flow.

6. align-content

Mengatur bagaimana beberapa baris flex dirapatkan ketika ada ruang vertikal ekstra.

.container {
    align-content: space-between;
}Code language: CSS (css)

Properti Flex Items (Anak Elemen)

1. flex-grow

Menentukan seberapa besar elemen tumbuh relatif terhadap elemen lainnya.

.item {
    flex-grow: 1;
}Code language: CSS (css)

2. flex-shrink

Menentukan seberapa banyak elemen menyusut ketika ruang tidak cukup.

.item {
    flex-shrink: 1;
}Code language: CSS (css)

3. flex-basis

Menentukan ukuran awal elemen sebelum diatur oleh flex-grow dan flex-shrink.

.item {
    flex-basis: 100px;
}Code language: CSS (css)

4. order

Menentukan urutan tampilan elemen, meskipun posisi HTML-nya berbeda.

.item {
    order: 2;
}Code language: CSS (css)

Contoh Layout Responsive Menggunakan Flexbox

Contoh: Layout Tiga Kolom Responsif

<div class="container">
    <div class="kolom">Kolom 1</div>
    <div class="kolom">Kolom 2</div>
    <div class="kolom">Kolom 3</div>
</div>Code language: HTML, XML (xml)

.container {
    display: flex;
    flex-wrap: wrap;
}
.kolom {
    flex: 1;
    min-width: 250px;
    background: #ddd;
    padding: 20px;
    margin: 10px;
}Code language: CSS (css)

Layout ini otomatis menyesuaikan jumlah kolom sesuai lebar layar — sangat cocok untuk desain responsive flexbox css.

Contoh Kombinasi Properti Flexbox

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}
.item {
    flex: 1;
    background: #0099cc;
    padding: 30px;
    color: #fff;
}Code language: CSS (css)

Properti gap menambahkan jarak antar elemen tanpa margin manual — fitur baru yang efisien di CSS Flexbox modern.

Tips Menggunakan Flexbox CSS

1. Gunakan display: flex; hanya pada kontainer, bukan pada semua elemen.
2. Untuk layout vertikal, gunakan flex-direction: column;.
3. Gunakan justify-content untuk horizontal alignment dan align-items untuk vertikal.
4. Hindari mencampur float dengan flexbox.
5. Gunakan flex-wrap agar elemen tetap rapi di layar kecil.

Kesimpulan

Flexbox CSS merupakan cara modern, efisien, dan sederhana untuk mengatur layout elemen di halaman web.

Dengan memahami konsep dan properti Flexbox, kamu dapat:

• Menyusun elemen dengan presisi.
• Mengatur posisi horizontal dan vertikal dengan mudah.
• Membuat layout responsive tanpa media query berlebih.

Jika kamu baru belajar CSS layout modern, Flexbox adalah fondasi penting sebelum beralih ke CSS Grid.

Mulailah bereksperimen dengan properti seperti justify-content, align-items, dan flex-wrap untuk memahami perilakunya secara langsung.