Layout Menggunakan Flexbox

1. Flexbox

Flexbox (Flexible Box Layout) adalah salah satu metode layout modern dalam CSS yang dirancang untuk mengatur elemen dalam satu dimensi — baik dalam arah horizontal (baris) maupun vertikal (kolom). Flexbox sangat bermanfaat dalam menyusun layout yang dinamis, responsif, dan rapi tanpa bergantung pada teknik lama seperti float atau positioning.

2. Konsep Utama: Main Axis dan Cross Axis

Untuk memahami cara kerja Flexbox, penting memahami dua konsep utama:

• Main Axis: Arah utama layout elemen. Ditentukan oleh properti flex-direction.
  
• Cross Axis: Arah tegak lurus dari Main Axis.

flex-direction	Main Axis	Cross Axis
row (default)	Horizontal	Vertikal
column	Vertikal	Horizontal

3. Struktur Dasar Flexbox

.container {
  display: flex;
}

Semua elemen anak dalam .container akan menjadi fleksibel dan mengikuti aturan Flexbox.

4. Properti Penting dalam Flexbox

4.1 flex-grow

Mengatur seberapa banyak elemen dapat bertambah lebar untuk mengisi ruang yang tersedia.

.item {
  flex-grow: 1;
}

Semakin besar nilainya, semakin besar elemen akan tumbuh.

4.2 flex-shrink

Mengatur seberapa banyak elemen akan mengecil jika ruang tidak cukup.

.item {
  flex-shrink: 1;
}

Nilai 0 berarti elemen tidak akan mengecil sama sekali.

4.3 flex-basis

Menentukan ukuran awal elemen sebelum ruang dibagi dengan flex-grow atau flex-shrink.

.item {
  flex-basis: 200px;
}

4.4 flex (Shorthand)

Menggabungkan flex-grow, flex-shrink, dan flex-basis dalam satu baris:

.item {
  flex: 1 0 200px;
}

5. Contoh Implementasi Layout

5.1 Membuat Navbar Responsif

HTML:

<nav class="navbar">
  <div class="logo">LOGO</div>
  <ul class="menu">
    <li>Beranda</li>
    <li>Tentang</li>
    <li>Kontak</li>
  </ul>
</nav>

CSS:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #2c3e50;
  color: white;
}

.menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

5.2 Galeri Responsif

HTML:

<div class="gallery">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

CSS:

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.item {
  flex: 1 1 200px;
  background-color: #ecf0f1;
  height: 150px;
  text-align: center;
  line-height: 150px;
  font-size: 1.5rem;
}

5.3 Form Dua Kolom

HTML:

<form class="form">
  <div class="form-group">
    <label for="name">Nama</label>
    <input type="text" id="name">
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email">
  </div>
</form>

CSS:

.form {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.form-group {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
}

6. Kesimpulan

Flexbox memungkinkan pembuatan layout yang fleksibel, mudah dipahami, dan responsif tanpa perlu menggunakan float atau teknik lawas. Dengan memahami properti utama seperti flex-grow, flex-shrink, dan flex-basis, serta konsep main axis dan cross axis, pengembang dapat membuat struktur UI yang rapi dan adaptif terhadap berbagai ukuran layar.