MagicFlex Logo MagicFlex
auto_stories
Latar Dunia Sihir MagicFlex

MagicFlex

Ikuti petualangan sihir yang menakjubkan untuk menguasai Flexbox, dari tingkat dasar hingga mahir.

auto_stories Mulai Petualangan

Tutorial Penggunaan MagicFlex

Pelajari dasar-dasar Flexbox dengan video panduan interaktif kami.

Materi Pembelajaran

Kuasai konsep-konsep Flexbox melalui penjelasan praktis dan interaktif

format_align_justify

justify-content

Mengatur perataan item secara horizontal di sepanjang main axis container.

align_items_stretch

align-items

Menentukan perataan item secara vertikal pada cross axis container.

swap_calls

flex-direction

Menetapkan arah barisan item (row, column, dan reverse-nya).

format_list_numbered

order

Mengatur urutan tampilan item secara fleksibel tanpa mengubah HTML.

person_pin

align-self

Mengatur perataan vertikal satu item secara spesifik, menimpa container.

wrap_text

flex-wrap

Menentukan apakah item akan pindah baris baru jika ruang tidak cukup.

sync_alt

flex-flow

Shorthand praktis untuk menggabungkan flex-direction dan flex-wrap.

align_justify_space_between

align-content

Mengatur posisi beberapa baris item pada cross axis saat multi-baris.

Tentang Kami

Website MagicFlex dibuat sebagai media pembelajaran interaktif untuk memahami Flexbox CSS dalam dunia sihir.

Ima Umiatul Chusnah

Ima Umiatul Chusnah

Hanydhar Rose Manicha

Hanydhar Rose Manicha

Maridho Anike Putri

Maridho Anike Putri

Candra Febriyanto

Candra Febriyanto

×

justify-content

Konsep Dasar

Properti justify-content adalah kunci untuk mengontrol tata letak horizontal dalam flexbox. Properti ini memberikan kendali penuh atas cara elemen-elemen didistribusikan di sepanjang main axis container flex.

Nilai-Nilai Properti

  • flex-start: Mengumpulkan elemen di awal container, seperti barisan yang dimulai dari garis start.
  • center: Menempatkan elemen di tengah container, menciptakan keseimbangan visual yang sempurna.
  • flex-end: Mengumpulkan elemen di akhir container, memberikan tampilan yang unik.
  • space-between: Mendistribusikan elemen dengan jarak yang sama di antaranya, optimal untuk layout yang rapi.
  • space-around: Memberikan ruang di sekitar setiap elemen, menciptakan tampilan yang lebih bernapas.

Tantangan Pengetahuan

Bayangkan Anda sedang membuat navigasi website dengan beberapa tombol yang perlu didistribusikan merata tanpa jarak di ujung-ujungnya. Properti justify-content manakah yang paling tepat?

×

align-content

Penjelasan

Properti align-content mengatur jarak antar baris dalam container flex multi-baris.

  • flex-start: Baris dikumpulkan di awal container.
  • center: Baris dikumpulkan di tengah container.
  • flex-end: Baris dikumpulkan di akhir container.
  • space-between: Baris didistribusikan merata.
  • space-around: Baris dengan jarak sama di sekitarnya.
  • stretch: Baris diregangkan memenuhi container.

Soal Latihan

Nilai align-content apa yang membuat jarak sama antar baris, termasuk di atas dan bawah container?