Panduan Lengkap CSS Flexbox untuk Layout Modern

Flexbox merevolusi cara kita membuat layout di CSS. Ini panduan lengkap yang bisa kamu jadikan referensi sehari-hari.

Aktifkan Flexbox

.container { display: flex; }

Justify Content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

Align Items

align-items: stretch | flex-start | flex-end | center;

Flex Grow/Shrink/Basis

.item { flex: 1; }           /* tumbuh proporsional */
.item { flex: 0 0 200px; }   /* lebar tetap 200px */

Centering — Trik Paling Sering Dipakai

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}