Menyusun berjajar dengan flexbox

Secara bawaan, kotak-kotak di halaman ditumpuk ke bawah, satu per baris. Wajar untuk paragraf. Tapi kadang kita ingin berjajar ke samping: menu, deretan tombol, kumpulan label keahlian.

Alatnya bernama flexbox, dan cara pakainya mengejutkan singkat.

Satu baris sakti

Ada dua pemain: wadah (kotak pembungkus) dan anak (kotak-kotak di dalamnya). Kamu cukup mengubah wadahnya:

.baris {
  display: flex;
}

Seketika anak-anaknya berjajar ke samping. Tidak perlu menyentuh anak satu pun.

Tiga properti pelengkap

Semuanya ditulis di wadah:

Satu tambahan: flex-direction: column membuat susunannya kembali ke bawah, tapi dengan kelebihan flexbox.

Coba sendiri

Tiga kotak biru menumpuk. Ikuti tantangan satu per satu dan amati kotaknya berpindah.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Flexbox</title>
  <style>
    .baris {
      background: #eeeeee;
      padding: 10px;
      /* Tantangan 1: display: flex supaya kotak berjajar ke samping */
      /* Tantangan 2: gap: 10px untuk jarak antar kotak */
      /* Tantangan 3: justify-content: center supaya kotak ke tengah */
    }
    .kotak {
      background: #0a66c2;
      color: white;
      padding: 16px;
    }
  </style>
</head>
<body>
  <div class="baris">
    <div class="kotak">Satu</div>
    <div class="kotak">Dua</div>
    <div class="kotak">Tiga</div>
  </div>
</body>
</html>

Kamu sudah melihatnya

Deretan label keahlian di CV, yang berbentuk pil biru berjajar, memakai persis ini:

.keahlian {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

flex-wrap: wrap itu yang membuat label turun ke baris baru saat layar HP sempit.