Flexbox adalah alat layout satu dimensi yang paling sering kita pakai sehari-hari: navigation bar, tombol berjajar, dan kartu sebaris. Section ini membahas cara kerja flex container dan flex items secara bertahap, dari sumbu hingga pola layout yang lazim dipakai produksi.

# Flex Container dan Flex Items

Kenali dua peran utama flexbox: flex container yang mengatur tata letak dan flex items yang tersusun di dalamnya.

Buka → # Main Axis dan Cross Axis

Pahami dua sumbu flexbox — main axis dan cross axis — beserta arah keduanya pada baris dan kolom.

Buka → # Flex Direction

Atur arah penyusunan flex items dengan flex-direction: row, row-reverse, column, dan column-reverse.

Buka → # Justify Content

Distribusikan ruang kosong pada main axis dengan justify-content, dari flex-start hingga space-evenly.

Buka → # Align Items dan Align Self

Sejajarkan flex items pada cross axis dengan align-items dan timpa satu item dengan align-self.

Buka → # Flex Wrap

Izinkan flex items pindah baris dengan flex-wrap dan pahami perilaku default nowrap yang menyusutkan items.

Buka → # Flex Grow, Flex Shrink, dan Flex Basis

Kuasai flex-grow, flex-shrink, dan flex-basis untuk mengatur bagaimana flex items mengambil dan melepas ruang di main axis.

Buka → # Gap

Berikan jarak antar flex items dengan row-gap, column-gap, dan shorthand gap — tanpa margin tambahan.

Buka → # Flexbox Layout Patterns

Terapkan pola layout flexbox yang lazim: navbar, perfect centering, media object, kartu dengan footer terdorong, dan sticky footer.

Buka →