Flexbox

Idenya

Sebelum ada flexbox, menaruh tiga hal berdampingan, atau menengahkan sesuatu secara vertikal, membutuhkan akal-akalan. Flexbox adalah mode layout untuk menyusun item dalam satu arah, baris atau kolom, dan mengatur bagaimana mereka berbagi ruang dan berbaris. Bar navigasi, toolbar, deretan kartu, menengahkan dialog: flexbox menangani semuanya dalam beberapa baris.

Menyalakannya

Navigasi Toko Kita berisi tiga link. Secara bawaan link-link itu akan berada di mana pun aliran teksnya, tanpa kendali atas jaraknya. Satu baris CSS pada <nav> mengubahnya menjadi flex container, dan link-link itu berbaris rapi dalam satu baris:

<style>
  .nav { display: flex; gap: 1rem; padding: 1rem; background: #fff4e5; }
</style>

<nav class="nav">
  <a href="/">Home</a>
  <a href="/coffee">Coffee</a>
  <a href="/equipment">Equipment</a>
</nav>

display: flex pada container menjadikan anak-anak langsungnya flex item, yang disusun dalam satu baris. gap menambah jarak di antara item (bukan di sekelilingnya), lebih baik daripada memberi margin pada setiap item.

Dua sumbu

Flexbox berpikir dalam dua arah:

• main axis (sumbu utama): arah aliran item (baris secara default, dari kiri ke kanan);
• cross axis (sumbu silang): tegak lurus terhadapnya (vertikal untuk baris).

justify-content meratakan item sepanjang sumbu utama; align-items sepanjang sumbu silang.

<style>
  .bar { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; background: #7a4b2a; color: white; }
  .bar .logo { font-size: 1.5rem; font-weight: bold; }
  .bar nav { display: flex; gap: 1rem; }
  .bar a { color: white; }
</style>

<header class="bar">
  <span class="logo">Toko Kita</span>
  <nav><a href="/coffee">Coffee</a><a href="/about">About</a><a href="/cart">Cart (2)</a></nav>
</header>

align-items menerima stretch (default: item mengisi sumbu silang), flex-start, center, flex-end dan baseline.

Menengahkan apa saja

Selama bertahun-tahun, "bagaimana cara menengahkan sesuatu secara vertikal?" adalah salah satu pertanyaan paling sering di dunia web. Dengan flexbox, jawabannya satu baris yang terkenal (yah, tiga baris): tengahkan di sepanjang sumbu utama, dan tengahkan di sepanjang sumbu silang:

<style>
  .hero { display: flex; justify-content: center; align-items: center; height: 200px; background: #fff4e5; }
</style>

<section class="hero"><p>Perfectly centred.</p></section>

Arah dan pindah baris

Baris tidak selalu yang kamu mau. Deretan kartu produk sebaiknya berlanjut ke baris berikutnya saat layarnya terlalu sempit, alih-alih menghimpit setiap kartu. Dan sekumpulan tombol mungkin lebih bagus kalau ditumpuk ke bawah. Dua property menangani hal itu:

<style>
  .cards { display: flex; flex-wrap: wrap; gap: 1rem; }
  .card { width: 160px; padding: 1rem; border: 1px solid #ddd; }
  .stack { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
</style>

<div class="cards">
  <div class="card">Arabica Gayo</div><div class="card">Toraja Kalosi</div>
  <div class="card">Kintamani</div><div class="card">Flores Bajawa</div>
</div>
<div class="stack"><button>Add to cart</button><button>Save for later</button></div>

• flex-direction: column membuat sumbu utama menjadi vertikal (jadi justify-content sekarang bekerja secara vertikal).
• flex-wrap: wrap membiarkan item pindah ke baris berikutnya saat tidak muat, alih-alih terhimpit.

Membesar dan mengecil

Item bisa berbagi sisa ruang dengan property flex pada item-nya:

<style>
  .layout { display: flex; gap: 1rem; }
  .sidebar { width: 180px; flex-shrink: 0; background: #fff4e5; padding: 1rem; }
  .content { flex: 1; background: #f5f5f5; padding: 1rem; }
  .search { display: flex; gap: 0.5rem; margin-top: 1rem; }
  .search input { flex: 1; }
</style>

<div class="layout">
  <aside class="sidebar">Filters</aside>
  <main class="content">Products take all the remaining width.</main>
</div>
<form class="search"><input type="search" aria-label="Search"><button>Search</button></form>

• flex: 1 berarti "membesar untuk mengisi ruang kosong" (dibagi rata kalau beberapa item memilikinya; flex: 2 mendapat bagian dua kali lipat).
• flex-shrink: 0 mencegah item mengecil di bawah lebarnya saat ruang sempit.
• Pola kotak pencarian (input membesar, tombol tetap ukurannya) ada di mana-mana begitu kamu menyadarinya.

Mengapa ini penting untuk kode yang bersih

Flexbox menggantikan tumpukan margin, float, dan lebar tetap dengan beberapa property yang menyatakan maksud: "beri jarak", "tengahkan ini", "bagian ini mengisi sisanya". Kode layout yang menyatakan maksud lebih mudah dibaca dan tahan terhadap perubahan konten: tambahkan link nav keempat, dan layout-nya tetap berfungsi.

Rangkuman

• display: flex menjadikan anak-anak langsung flex item dalam satu baris.
• gap untuk jarak di antara item.
• Sumbu utama: justify-content (center, space-between...); sumbu silang: align-items (center, stretch...).
• flex-direction: column untuk aliran vertikal; flex-wrap: wrap untuk mengizinkan beberapa baris.
• Pada item: flex: 1 untuk membesar, flex-shrink: 0 untuk mempertahankan lebar tetap.