HTML Dasar #33 - Menggunakan Flexbox untuk Layout (display: flex)

byFerdian Rahabista -
0

Setelah kita belajar responsive design dan viewport, sekarang saatnya mengenal Flexbox - salah satu alat paling powerful dalam CSS untuk membuat layout. Flexbox memudahkan kita mengatur posisi, kesejajaran, dan distribusi ruang antar elemen dalam container, bahkan ketika ukuran elemen tidak diketahui.

Apa Itu Flexbox?

Flexible Box Module (Flexbox) adalah model layout CSS yang dirancang untuk mengatur elemen dalam satu dimensi (baris atau kolom). Flexbox menggantikan teknik layout lama yang rumit (float, positioning, tabel).

Kelebihan Flexbox:
  • Mudah membuat elemen rata tengah (horizontal dan vertikal)
  • Mudah membuat navbar dengan logo di kiri dan menu di kanan
  • Mudah mengatur jarak antar elemen secara otomatis
  • Mudah membuat layout responsif tanpa media query rumit
  • Mudah mengubah urutan elemen tanpa mengubah HTML

Konsep Dasar Flexbox

Flexbox memiliki dua komponen utama:

Komponen Penjelasan Contoh
Flex Container (induk) Elemen yang diberi display: flex atau display: inline-flex <div class="container"> (parent)
Flex Item (anak) Elemen langsung di dalam flex container (bukan cucu) <div>Item 1</div> (child langsung)
Dua Sumbu dalam Flexbox:
- Main Axis (sumbu utama) → arah flex (bisa horizontal atau vertikal)
- Cross Axis (sumbu silang) → tegak lurus dari main axis

Default: Main axis = horizontal (kiri ke kanan), Cross axis = vertikal (atas ke bawah)

Properti untuk Flex Container (Parent)

Berikut properti CSS yang diterapkan ke flex container:

Properti Nilai Fungsi
display flex atau inline-flex Mengaktifkan flexbox pada container
flex-direction row, row-reverse, column, column-reverse Mengatur arah sumbu utama
justify-content flex-start, flex-end, center, space-between, space-around, space-evenly Mengatur posisi item di sumbu utama
align-items stretch, flex-start, flex-end, center, baseline Mengatur posisi item di sumbu silang
flex-wrap nowrap, wrap, wrap-reverse Mengizinkan item membungkus ke baris baru
gap 10px, 1rem, dll Jarak antar item (baris dan kolom)

1. Mengaktifkan Flexbox (display: flex)

Cukup tambahkan display: flex ke container, maka semua child langsung menjadi flex item dan otomatis berjajar horizontal.

Contoh Tanpa Flexbox vs Dengan Flexbox:

<style>
    .tanpa-flex { background: #f0f4f8; padding: 10px; }
    .tanpa-flex div { background: #3b82f6; color: white; padding: 15px; margin: 5px; }
    
    .dengan-flex { background: #f0f4f8; padding: 10px; display: flex; }
    .dengan-flex div { background: #22c55e; color: white; padding: 15px; margin: 5px; }
</style>

<div class="tanpa-flex">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<div class="dengan-flex">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Hasilnya:

Item 1
Item 2
Item 3

Tanpa Flexbox (block element → vertikal)

Item 1
Item 2
Item 3

Dengan Flexbox (horizontal berjajar)

2. flex-direction (Arah Flex)

flex-direction mengatur arah sumbu utama (main axis). Default: row (horizontal).

row (default)
1
2
3

Kiri → Kanan

row-reverse
1
2
3

Kanan → Kiri

column
1
2
3

Atas → Bawah

column-reverse
1
2
3

Bawah → Atas

3. justify-content (Mengatur Posisi di Sumbu Utama)

justify-content mengatur posisi item di sumbu utama (default: horizontal).

flex-start (default)
1
2

Rata kiri

center
1
2

Rata tengah

flex-end
1
2

Rata kanan

space-between
1
2

Item pertama di kiri, terakhir di kanan

space-around
1
2

Ruang di kiri dan kanan setiap item

space-evenly
1
2

Ruang sama di semua sisi

4. align-items (Mengatur Posisi di Sumbu Silang)

align-items mengatur posisi item di sumbu silang (default: vertikal).

stretch (default)
Item

Memenuhi tinggi container

flex-start
Item

Rata atas

center
Item

Rata tengah vertikal

flex-end
Item

Rata bawah

Tips Cepat:
  • justify-content: center → rata tengah horizontal
  • align-items: center → rata tengah vertikal
  • Kombinasikan keduanya untuk memusatkan elemen di tengah container!

5. flex-wrap (Membungkus Item)

flex-wrap mengatur apakah item boleh pindah ke baris baru jika tidak muat.

nowrap (default)
Item 1
Item 2
Item 3

Item dipaksa dalam satu baris (overflow)

wrap
Item 1
Item 2
Item 3

Item pindah ke baris baru jika tidak muat

6. gap (Jarak Antar Item)

gap memberikan jarak antar item flex (pengganti margin).

<style>
    .flex-gap {
        display: flex;
        gap: 20px;  /* jarak antar item 20px */
        background: #f0f4f8;
        padding: 15px;
    }
    .flex-gap div {
        background: #3b82f6;
        color: white;
        padding: 15px;
    }
</style>
Item 1
Item 2
Item 3

gap: 20px (jarak antar item)

Contoh Proyek: Navbar dengan Flexbox

<style>
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #1e293b;
        padding: 15px 30px;
        color: white;
    }
    .logo {
        font-size: 24px;
        font-weight: bold;
    }
    .nav-links {
        display: flex;
        gap: 25px;
    }
    .nav-links a {
        color: white;
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 6px;
    }
    .nav-links a:hover {
        background: #3b82f6;
    }
    .btn-contact {
        background: #3b82f6;
        padding: 8px 20px;
        border-radius: 25px;
    }
    @media (max-width: 768px) {
        .navbar {
            flex-direction: column;
            gap: 15px;
            text-align: center;
        }
        .nav-links {
            flex-direction: column;
            gap: 10px;
        }
    }
</style>

<nav class="navbar">
    <div class="logo">MyWebsite</div>
    <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Portfolio</a>
        <a href="#" class="btn-contact">Contact</a>
    </div>
</nav>

Navbar dengan Flexbox: logo di kiri, menu di kanan. Saat layar kecil (<768px), berubah menjadi kolom.

Contoh Proyek: Card Grid dengan Flexbox

<style>
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
    .card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        width: 280px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }
    .card:hover {
        transform: translateY(-5px);
    }
    @media (max-width: 640px) {
        .card {
            width: 100%;
        }
    }
</style>

<div class="card-container">
    <div class="card">
        <h3>Card 1</h3>
        <p>Deskripsi singkat untuk card pertama.</p>
    </div>
    <div class="card">
        <h3>Card 2</h3>
        <p>Deskripsi singkat untuk card kedua.</p>
    </div>
    <div class="card">
        <h3>Card 3</h3>
        <p>Deskripsi singkat untuk card ketiga.</p>
    </div>
</div>

Card 1

Deskripsi singkat untuk card pertama.

Card 2

Deskripsi singkat untuk card kedua.

Card 3

Deskripsi singkat untuk card ketiga.

Contoh Proyek: Memusatkan Elemen di Tengah Halaman

Salah satu penggunaan Flexbox paling umum adalah memusatkan elemen (horizontal dan vertikal).

<style>
    .center-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .center-box {
        background: white;
        padding: 40px;
        border-radius: 20px;
        text-align: center;
    }
</style>

<div class="center-container">
    <div class="center-box">
        <h2>Saya di Tengah!</h2>
        <p>Tepat di tengah halaman, baik horizontal maupun vertikal.</p>
    </div>
</div>

Saya di Tengah!

Tepat di tengah container.

Properti untuk Flex Item (Child)

Selain properti di container, ada juga properti yang diterapkan ke flex item (anak langsung):

Properti Nilai Fungsi
order angka (0, 1, 2, -1, dll) Mengatur urutan item (semakin kecil semakin awal)
flex-grow angka (0, 1, 2, dll) Mengatur kemampuan item untuk membesar (1 = membagi ruang)
flex-shrink angka (0, 1, dll) Mengatur kemampuan item untuk mengecil (0 = tidak bisa mengecil)
flex-basis ukuran (100px, auto, dll) Ukuran awal item sebelum didistribusikan
flex (shorthand) 1, 2 1 auto, dll Gabungan grow, shrink, basis
align-self center, flex-start, flex-end Mengatur posisi item sendiri (override align-items)

Contoh flex-grow (Membagi Ruang):

<style>
    .flex-grow-demo {
        display: flex;
        background: #f0f4f8;
        padding: 10px;
    }
    .item1 { background: #3b82f6; padding: 15px; flex-grow: 1; }
    .item2 { background: #22c55e; padding: 15px; flex-grow: 2; }
    .item3 { background: #f59e0b; padding: 15px; flex-grow: 1; }
</style>
flex-grow: 1
flex-grow: 2
flex-grow: 1

Item tengah mendapat ruang 2x lebih besar dari item samping.

Kesalahan Umum Pemula

  • Lupa menambahkan display: flex ke container → Properti flex lainnya tidak akan berfungsi.
  • Mencoba menerapkan properti flex ke child (bukan parent) → Properti seperti justify-content hanya bekerja di container.
  • Mengira justify-content untuk vertikal → justify-content untuk sumbu utama (default horizontal), align-items untuk sumbu silang (default vertikal).
  • Lupa bahwa gap tidak didukung di browser lama → Untuk kompatibilitas maksimal, gunakan margin pada item.
  • Menggunakan flex-direction: column tapi tetap pakai justify-content: space-between → Sekarang sumbu utama adalah vertikal.
Debugging Tips:
  • Buka Developer Tools (F12) → inspect elemen → lihat tab Styles
  • Di tab Styles, cari properti flex dan lihat apakah ada yang dicoret (tidak berlaku)
  • Gunakan Flexbox Inspector di Firefox (sangat membantu untuk debugging flex)

Latihan Singkat

  1. Buat file HTML baru dengan judul "Latihan Flexbox"
  2. Buat container dengan display: flex dan 4 item di dalamnya
  3. Atur justify-content: space-between
  4. Atur align-items: center
  5. Tambahkan gap: 20px
  6. Buat satu item dengan flex-grow: 2
  7. Uji di berbagai ukuran layar dengan media query (flex-wrap: wrap)

Intisari Hari Ini

  • display: flex → mengaktifkan flexbox pada container
  • justify-content → mengatur posisi di sumbu utama (horizontal)
  • align-items → mengatur posisi di sumbu silang (vertikal)
  • flex-direction → mengubah arah sumbu utama (row/column)
  • flex-wrap → mengizinkan item pindah baris
  • gap → jarak antar item
  • flex-grow → membagi ruang yang tersedia
  • Flexbox adalah skill wajib untuk web developer modern
Tantangan Akhir Pekan: Buat sebuah Halaman Dashboard yang menggunakan Flexbox untuk layout! Persyaratan:
  • Header dengan judul dashboard (flex, space-between, align-items center)
  • Sidebar kiri (lebar 250px) berisi menu navigasi (flex-direction: column)
  • Area konten utama (flex-grow: 1) berisi grid kartu (flex-wrap: wrap, gap)
  • Minimal 4 kartu di konten utama (masing-masing kartu memiliki judul dan deskripsi)
  • Footer di bagian bawah (flex, justify-content: center)
  • Semua layout menggunakan Flexbox (jangan pakai grid untuk layout utama)
  • Responsive: di layar < 768px, sidebar pindah ke atas atau jadi full width
  • Tambahkan kotak penjelasan yang mendokumentasikan semua properti flex yang digunakan

Bonus: Buat sidebar yang bisa collapse (sembunyi) dengan JavaScript menggunakan display: none.

Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #32 - Apa Itu Responsive Web Design? Pengertian Viewport
Artikel Selanjutnya: HTML Dasar #34 - Menggunakan Grid CSS untuk Layout Halaman

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال