Seluruh perkakas flexbox telah kita pegang: dua sumbu, arah, penjajaran, pembungkusan, distribusi ruang, dan gap. Chapter penutup ini menyatukannya menjadi lima pola yang muncul terus-menerus di kode produksi — navbar, perfect centering, media object, kartu dengan footer terdorong, dan sticky footer. Setiap pola hanya memakai beberapa deklarasi dari chapter-chapter sebelumnya, sehingga membacanya sekaligus menjadi latihan mengenali “pola mana yang sedang bekerja” pada kode orang lain.

Pola navbar paling lazim terdiri atas dua gugus: brand di kiri dan menu di kanan. Daripada menghitung margin, container cukup memakai justify-content: space-between yang kita hitung pada Chapter Justify Content — seluruh ruang sisa ditempatkan di antara kedua gugus. File berikut dipakai oleh demo chapter ini:

css contoh-pola-layout.css 
/* Pola 1: navbar space-between */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgb(15, 23, 42);
  color: rgb(255, 255, 255);
}
.merek { font-weight: 700; }
.menu {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Pola 2: perfect centering */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: rgb(241, 245, 249);
}
.kotak-sapa {
  padding: 24px 32px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
}
/* Pola 3: media object */
.media {
  display: flex;
  gap: 12px;
  width: 420px;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgb(94, 234, 212);
  flex-shrink: 0;          /* avatar tidak ikut menyusut */
}
.media-body { flex: 1; min-width: 0; }
.media-judul { font-weight: 700; margin-bottom: 4px; }
/* Pola 4: kartu dengan footer terdorong */
.kartu {
  display: flex;
  flex-direction: column;
  width: 260px;
  height: 190px;
  border: 1px solid rgb(226, 232, 240);
  background: rgb(255, 255, 255);
}
.isi-kartu { flex: 1; padding: 16px; }
.kaki-kartu {
  display: flex;
  padding: 12px 16px;
  border-top: 1px solid rgb(226, 232, 240);
}
.tombol-polos { color: rgb(71, 85, 105); }
.tombol-utama {
  margin-left: auto;       /* didorong ke ujung kanan */
  padding: 6px 14px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  border-radius: 6px;
  font-weight: 700;
}

Mari kita telaah keputusan desain di balik aturan-aturan di atas:

  1. .navbar (space-between + align-items center): brand dan menu menjadi dua flex items; ruang sisa seluruhnya di antara keduanya, sementara align-items merapatkan tinggi keduanya di cross axis.
  2. .menu (flex + gap): deretan tautan disusun berjajar dengan jarak seragam 16px — flexbox bersarang di dalam flexbox.
  3. .hero (align-items center + justify-content center): penjajaran kedua sumbu sekaligus; apa pun ukuran kotak sapaan, posisinya tepat di tengah — pola yang sering disebut perfect centering.
  4. .media + .avatar (flex-shrink: 0): gambar bulat tidak boleh gepeng saat teks panjang, sehingga shrink-nya dinolkan; body teks justru yang menyerap penyusutan berkat flex: 1 dan min-width: 0.
  5. .kartu (column + isi flex: 1): isi kartu direnggangkan hingga footer terdorong ke dasar, apa pun panjang teksnya.
  6. .tombol-utama (margin-left: auto): di dalam footer yang juga flex, margin auto menyerap seluruh ruang sisa di kirinya sehingga tombol menempel ke kanan — pasangan alami dari space-between ketika items lebih dari dua gugus.

HTML pendampingnya menyusun keempat pola bertumpuk:

html index.html 
<div class="hero">
  <div class="kotak-sapa">Halo, flexbox</div>
</div>
<div class="kartu">
  <div class="isi-kartu">
    <p>Ringkasan artikel singkat di dalam kartu.</p>
  </div>
  <div class="kaki-kartu">
    <span class="tombol-polos">Bagikan</span>
    <span class="tombol-utama">Baca</span>
  </div>
</div>

Hasil di Browser:

text 
Navbar: brand menempel di kiri, tiga tautan menu di kanan dengan jarak 16px
(computed display flex, justify-content space-between).
Hero setinggi 200px: kotak sapaan berada tepat di tengah, vertikal dan
horizontal (computed align-items center, justify-content center).
Media object: avatar 48px di kiri, teks mengisi sisa ruang (display flex).
Kartu setinggi 190px: computed display flex dengan flex-direction column,
isi kartu direnggangkan berkat flex-grow 1 sehingga footer menempel di dasar
dan tombol Baca menempel di ujung kanan footer berkat margin-left auto.

Pola kelima menuntaskan masalah klasik: footer yang menempel di dasar viewport pada halaman pendek, namun tetap mengalir setelah konten pada halaman panjang. Resepnya memakai flex arah kolom dengan tinggi minimal satu viewport:

css 
.halaman {
  display: flex;
  flex-direction: column;
  min-height: 100vh;   /* fallback browser lama */
  min-height: 100dvh;  /* tinggi dinamis perangkat, Baseline 2023 */
}
.kaki-halaman { margin-top: auto; }

margin-top: auto pada footer bekerja dengan prinsip yang sama seperti tombol Baca di kartu: ruang sisa di main axis diserap margin, sehingga footer terdorong ke ujung bawah. Unit dvh menangani perangkat dengan bilah URL yang menyembunyikan sebagian tinggi layar; deklarasi 100vh di atasnya tetap dipertahankan sebagai fallback karena fitur ini Baseline 2023.

Section Flexbox sampai di sini telah membangun fondasi layout satu dimensi secara utuh. Untuk layout dua dimensi — baris dan kolom sekaligus dalam satu container — lanjutkan ke Section Grid .

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-pola-layout.css

Unduh berkas
css 
/* Pola 1: navbar space-between */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgb(15, 23, 42);
  color: rgb(255, 255, 255);
}
.merek { font-weight: 700; }
.menu {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Pola 2: perfect centering */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: rgb(241, 245, 249);
}
.kotak-sapa {
  padding: 24px 32px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
}
/* Pola 3: media object */
.media {
  display: flex;
  gap: 12px;
  width: 420px;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgb(94, 234, 212);
  flex-shrink: 0;          /* avatar tidak ikut menyusut */
}
.media-body { flex: 1; min-width: 0; }
.media-judul { font-weight: 700; margin-bottom: 4px; }
/* Pola 4: kartu dengan footer terdorong */
.kartu {
  display: flex;
  flex-direction: column;
  width: 260px;
  height: 190px;
  border: 1px solid rgb(226, 232, 240);
  background: rgb(255, 255, 255);
}
.isi-kartu { flex: 1; padding: 16px; }
.kaki-kartu {
  display: flex;
  padding: 12px 16px;
  border-top: 1px solid rgb(226, 232, 240);
}
.tombol-polos { color: rgb(71, 85, 105); }
.tombol-utama {
  margin-left: auto;       /* didorong ke ujung kanan */
  padding: 6px 14px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  border-radius: 6px;
  font-weight: 700;
}