CSS Dasar #23 - Pengenalan Flexbox: display: flex, flex-direction

byFerdian Rahabista -
0

Setelah mempelajari positioning dan z-index, sekarang saatnya mengenal Flexbox (Flexible Box Layout) - salah satu alat paling powerful dalam CSS modern untuk membuat layout. Flexbox menyederhanakan pembuatan layout yang responsif, fleksibel, dan mudah diatur, baik untuk komponen kecil maupun struktur halaman secara keseluruhan.

Apa Itu Flexbox?

Flexbox adalah model layout satu dimensi (baris ATAU kolom) yang memungkinkan kita mengatur ruang dan posisi elemen di dalam container secara fleksibel. Keunggulan Flexbox:

  • Membuat elemen rata tengah dengan mudah (horizontal & vertikal).
  • Mengatur jarak antar elemen secara otomatis.
  • Membuat navbar responsif dengan logo kiri dan menu kanan.
  • Mengubah urutan elemen tanpa mengubah HTML.
  • Membuat kolom dengan tinggi yang sama secara otomatis.
Dua Komponen Flexbox:
1. Flex Container (induk) → elemen yang diberi display: flex atau display: inline-flex.
2. Flex Item (anak) → elemen langsung di dalam flex container.

1. Dasar Flexbox

Untuk memulai Flexbox, cukup tambahkan display: flex ke container. Secara default, semua item akan berjajar horizontal (satu baris) dan memiliki tinggi yang sama.

Contoh: Tanpa Flex vs Dengan Flex

<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>
Item 1
Item 2
Item 3

Tanpa Flexbox (block → vertikal)

Item 1
Item 2
Item 3

Dengan Flexbox (horizontal berjajar)

2. Sumbu dalam Flexbox (Main Axis & Cross Axis)

Flexbox memiliki dua sumbu:

  • Main Axis (sumbu utama) → arah utama pergerakan item. Default: horizontal (kiri ke kanan).
  • Cross Axis (sumbu silang) → tegak lurus terhadap main axis. Default: vertikal (atas ke bawah).
Visualisasi Sumbu (default row):
Main Axis: ←→ (horizontal)
Cross Axis: ↑↓ (vertikal)

3. flex-direction (Mengatur Arah Sumbu Utama)

Properti flex-direction menentukan arah main axis (sumbu utama). Nilai yang tersedia:

Nilai Arah Main Axis Contoh
row (default) Horizontal kiri → kanan 1 2 3
row-reverse Horizontal kanan → kiri 3 2 1
column Vertikal atas → bawah 1 2 3 (vertikal)
column-reverse Vertikal bawah → atas 3 2 1 (vertikal)

Contoh flex-direction:

<style>
    .flex-container {
        display: flex;
        background: #f0f4f8;
        padding: 10px;
        margin-bottom: 15px;
    }
    .flex-container div {
        background: #3b82f6;
        color: white;
        padding: 15px;
        margin: 5px;
        border-radius: 5px;
    }
    .row { flex-direction: row; }
    .row-reverse { flex-direction: row-reverse; }
    .column { flex-direction: column; }
    .column-reverse { flex-direction: column-reverse; }
</style>

<div class="flex-container row">
    <div>1</div><div>2</div><div>3</div>
</div>
<div class="flex-container row-reverse">
    <div>1</div><div>2</div><div>3</div>
</div>
<div class="flex-container column">
    <div>1</div><div>2</div><div>3</div>
</div>
<div class="flex-container column-reverse">
    <div>1</div><div>2</div><div>3</div>
</div>
1
2
3

row (default): kiri → kanan

1
2
3

row-reverse: kanan → kiri

1
2
3

column: atas → bawah

1
2
3

column-reverse: bawah → atas

Contoh Proyek: Navbar Responsif dengan Flexbox

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox - Navbar Responsif</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
        }
        
        /* Navbar dengan Flexbox */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #1e293b;
            color: white;
            padding: 15px 40px;
            flex-wrap: wrap;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
            gap: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: #3b82f6;
        }
        
        /* Demo section */
        .container {
            max-width: 1000px;
            margin: 40px auto;
            background: white;
            border-radius: 20px;
            padding: 30px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        
        /* Flex demo card */
        .flex-demo {
            display: flex;
            flex-direction: row;
            gap: 20px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        
        .demo-card {
            background: #eef2ff;
            padding: 20px;
            border-radius: 12px;
            flex: 1;
            min-width: 150px;
        }
        
        .demo-card h3 {
            margin-bottom: 10px;
        }
        
        /* Media query untuk responsive navbar */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            .nav-links {
                flex-direction: column;
                gap: 10px;
            }
        }
        
        .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;
        }
    </style>
</head>
<body>

    <nav class="navbar">
        <div class="logo">MyBrand</div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <div class="container">
        <h1>Belajar Flexbox - Dasar</h1>
        
        <div class="flex-demo">
            <div class="demo-card">
                <h3>Flex Container</h3>
                <p>Elemen dengan <code>display: flex</code>. Mengatur arah, perataan, dan jarak item.</p>
            </div>
            <div class="demo-card">
                <h3>Flex Item</h3>
                <p>Anak langsung dari flex container. Bisa diatur order, grow, shrink, dll.</p>
            </div>
            <div class="demo-card">
                <h3>Main Axis & Cross Axis</h3>
                <p>Sumbu utama (main axis) ditentukan oleh <code>flex-direction</code>.</p>
            </div>
        </div>
        
        <div class="info-box">
            <h3>Ringkasan Flexbox Dasar</h3>
            <ul>
                <li><code>display: flex</code> → mengaktifkan flexbox pada container.</li>
                <li><code>flex-direction</code> → mengatur arah sumbu utama (row, column, row-reverse, column-reverse).</li>
                <li><code>flex-wrap</code> → mengatur apakah item boleh pindah baris/kolom.</li>
                <li>Flexbox memudahkan layout responsif, navbar, card grid, dan perataan elemen.</li>
            </ul>
        </div>
    </div>

</body>
</html>

Hasil visual navbar:

Navbar menggunakan Flexbox: logo di kiri, menu di kanan. Saat layar kecil, flex-direction berubah menjadi column.

Kesalahan Umum Pemula

  • Lupa menambahkan display: flex pada container → Properti flex lainnya tidak akan berfungsi.
  • Mengira flex-direction mengubah urutan item → Ya, tapi hanya tampilan, bukan urutan di DOM.
  • Tidak memahami perbedaan main axis dan cross axis → Penting untuk perataan dengan justify-content (main axis) dan align-items (cross axis).
  • Menggunakan flex-direction: column tetapi lupa mengatur tinggi container → Item bisa keluar dari batas.
Debugging Tips:
  • Buka Developer Tools (F12) → inspect flex container → di tab Styles, cari properti flex.
  • Gunakan Flexbox Inspector di Firefox (sangat membantu memvisualisasikan sumbu).
  • Berikan border/warna sementara pada flex container dan item untuk melihat batas.

Latihan Singkat

  1. Buat flex container dengan 4 item, atur flex-direction: row, row-reverse, column, column-reverse. Amati perubahannya.
  2. Buat navbar dengan logo di kiri dan menu di kanan menggunakan flexbox.
  3. Buat galeri 3 kartu dalam satu baris menggunakan flexbox.
  4. Buat container dengan flex-direction: column dan beri tinggi 300px, amati bagaimana item disusun.

Intisari Hari Ini

  • Flexbox adalah model layout satu dimensi untuk mengatur ruang dan posisi elemen.
  • display: flex → mengaktifkan flexbox pada container.
  • flex-direction → mengatur arah sumbu utama (row, row-reverse, column, column-reverse).
  • Main axis adalah arah utama (default horizontal), cross axis tegak lurus.
  • Flexbox sangat berguna untuk navbar, card grid, form layout, dan pemusatan elemen.
  • Selanjutnya akan dipelajari properti untuk mengatur perataan: justify-content dan align-items.
Tantangan: Buat sebuah Halaman Portofolio dengan Header, Galeri Karya, dan Footer menggunakan Flexbox! Persyaratan:
  • Header dengan logo (kiri) dan navigasi (kanan) menggunakan flex.
  • Galeri karya minimal 4 kartu dalam satu baris (flex-wrap: wrap).
  • Footer dengan 3 kolom informasi (tentang, kontak, sosial media) dalam satu baris flex.
  • Gunakan flex-direction: row untuk desktop, dan media query untuk mengubah ke column di HP.
  • Tambahkan efek hover pada kartu (scale, shadow).
  • Buat kotak penjelasan tentang properti flex yang dipakai.

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #22 - Z-Index: Mengatur Tumpukan Elemen
Artikel Selanjutnya: CSS Dasar #24 - justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

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