Tata letak dengan flexbox: menjajarkan tanpa pusing

Secara bawaan, elemen seperti paragraf dan judul tersusun dari atas ke bawah. Begitu ingin menaruh dua hal bersebelahan, misalnya nama di kiri dan menu di kanan, kita butuh alat tata letak. Flexbox adalah alat paling sederhana untuk pekerjaan itu.

Wadah dan anak

Flexbox selalu melibatkan dua pihak. Wadah adalah elemen yang diberi display: flex. Anak adalah elemen yang berada langsung di dalamnya. Properti flexbox sebagian dipasang di wadah, sebagian di anak; tertukar di antara keduanya adalah sumber kebingungan paling umum.

Mulai dari HTML kepala halaman. Tambahkan di awal <body>, sebelum <main>:

<header class="kepala">
  <a class="merek" href="index.html">Rani Kusuma</a>
  <nav class="menu">
    <a href="index.html">Beranda</a>
    <a href="catatan.html">Catatan</a>
    <a href="kontak.html">Kontak</a>
  </nav>
</header>

Tanpa CSS, nama dan ketiga tautan menu tampil berurutan dalam satu alur teks. Sekarang jadikan .kepala sebagai wadah flex.

.kepala {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.menu {
  display: flex;
  gap: 16px;
}

.merek {
  font-weight: 700;
  text-decoration: none;
}

Muat ulang halaman. Nama berada di kiri, menu di kanan, dan keduanya sejajar di tengah secara vertikal. .menu juga kita jadikan wadah flex supaya jarak antartautan bisa diatur dengan gap.

Sumbu utama dan sumbu silang

Wadah flex punya dua sumbu. Sumbu utama adalah arah anak-anak dijajarkan; bawaannya mendatar dari kiri ke kanan. Sumbu silang tegak lurus terhadapnya. Dua properti perataan mengikuti sumbu ini:

• justify-content mengatur perataan di sepanjang sumbu utama. Nilai space-between mendorong anak pertama dan terakhir ke kedua ujung.
• align-items mengatur perataan di sumbu silang. Nilai center menengahkan anak secara vertikal ketika sumbu utamanya mendatar.
• gap memberi jarak antaranak tanpa menambah jarak di tepi luar.

Deretan kartu yang bisa turun

Sekarang kita buat tiga kartu yang berjajar di layar lebar dan turun ke bawah di layar sempit. Tambahkan di dalam <main>:

<section class="daftar-kartu">
  <article class="kartu">
    <h3>HTML</h3>
    <p>Struktur halaman.</p>
  </article>
  <article class="kartu">
    <h3>CSS</h3>
    <p>Tampilan halaman.</p>
  </article>
  <article class="kartu">
    <h3>JavaScript</h3>
    <p>Perilaku halaman.</p>
  </article>
</section>

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

.daftar-kartu .kartu {
  flex: 1 1 200px;
}

Ada dua hal baru di sini. flex-wrap: wrap mengizinkan anak pindah ke baris berikutnya ketika ruang tidak cukup. Tanpa properti ini, semua anak dipaksa muat dalam satu baris dan bisa tergencet.

flex: 1 1 200px adalah singkatan dari tiga hal: anak boleh membesar (angka 1 pertama), boleh mengecil (angka 1 kedua), dan lebar awalnya 200 piksel. Hasilnya, tiga kartu berbagi ruang sama rata di layar lebar. Saat lebar layar tidak cukup untuk tiga kali 200 piksel ditambah jaraknya, kartu terakhir turun ke baris baru dan melebar mengisi baris itu.

Coba sempitkan jendela peramban pelan-pelan dan perhatikan kartu berpindah baris satu per satu. Kita mendapat perilaku ini tanpa menulis satu pun aturan khusus untuk ukuran layar tertentu.

Kapan flexbox bukan jawabannya

Flexbox bekerja dalam satu arah: satu baris atau satu kolom. Untuk tata letak yang menuntut baris dan kolom sejajar sekaligus, misalnya galeri foto dengan kotak-kotak rapi, CSS punya alat lain bernama grid. Untuk kepala halaman, menu, deretan tombol, dan kartu sederhana, flexbox hampir selalu cukup.