Pengenalan Flexbox

Pengenalan Flexbox 💪

Flexbox (Flexible Box Layout) adalah sistem layout CSS yang dirancang untuk menyusun elemen-elemen secara satu dimensi — baik dalam satu baris maupun satu kolom — dengan cara yang fleksibel dan mudah dikontrol.

Mengapa Flexbox?

Sebelum Flexbox, membuat layout yang sederhana pun memerlukan trik-trik rumit:

/* Cara lama — memusatkan elemen secara vertikal: SUSAH */
.container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Dengan Flexbox — sangat mudah! */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

Konsep Dasar Flexbox

Flexbox bekerja dengan dua peran utama:

1. Flex Container — elemen yang memiliki display: flex
2. Flex Item — elemen anak langsung dari flex container

<div class="container">   <!-- FLEX CONTAINER -->
  <div class="item">A</div>  <!-- FLEX ITEM -->
  <div class="item">B</div>  <!-- FLEX ITEM -->
  <div class="item">C</div>  <!-- FLEX ITEM -->
</div>

.container {
  display: flex; /* mengaktifkan flexbox */
}

Hanya dengan satu baris display: flex, ketiga item langsung berjajar secara horizontal.

Dua Sumbu Flexbox

Flexbox memiliki dua sumbu:

• Main Axis (sumbu utama) — arah item berjajar (default: horizontal)
• Cross Axis (sumbu silang) — tegak lurus dari main axis (default: vertikal)

Main Axis (default) →
┌─────────────────────────────┐
│  [A]   [B]   [C]           │
└─────────────────────────────┘
        ↑ Cross Axis

Arah sumbu utama ditentukan oleh flex-direction.

flex-direction — Arah Berjajar

.container {
  display: flex;
  flex-direction: row;            /* default: kiri ke kanan */
  flex-direction: row-reverse;    /* kanan ke kiri */
  flex-direction: column;         /* atas ke bawah */
  flex-direction: column-reverse; /* bawah ke atas */
}

Visualnya:

row:         [A] [B] [C]
row-reverse: [C] [B] [A]

column:      [A]
             [B]
             [C]

column-rev:  [C]
             [B]
             [A]

Contoh Pertama — Navbar Sederhana

<nav class="navbar">
  <div class="logo">Brand</div>
  <ul class="menu">
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tentang</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* logo kiri, menu kanan */
  align-items: center;            /* rata tengah vertikal */
  padding: 16px 32px;
  background: #1d4ed8;
}

Flexbox vs Metode Lain

💡 Tips: Flexbox ideal untuk layout satu dimensi — baris ATAU kolom. Untuk layout dua dimensi (baris DAN kolom sekaligus seperti grid halaman), gunakan CSS Grid. Keduanya saling melengkapi, bukan menggantikan. 🏗️