Beginner · Level 3: CSS Fundamentals and LayoutBeginner40 menitBahasa Indonesia

Flexbox Dasar

Pahami Flexbox sebagai cara menyusun elemen dalam satu arah, baik baris maupun kolom.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memahami Flexbox sebagai layout satu arah
Memahami flex container dan flex item
Menggunakan display: flex
Menggunakan gap
Mengenal justify-content dan align-items secara sederhana

CSSFlexboxLayout

Isi lesson

7 blok

1.
Flexbox menyusun item dalam satu arahBelum selesaiWajib
2.
Contoh Flexbox sederhanaBelum selesaiWajib
3.
CSS untuk menyusun cardBelum selesaiWajib
4.
Kapan Flexbox cocok?Belum selesaiOpsional
5.
Cek pemahamanBelum selesaiWajib
6.
Coding practiceBelum selesaiWajib
7.
RingkasanBelum selesaiWajib

Flexbox menyusun item dalam satu arah

Wajib

Flexbox membantu kamu menyusun elemen dalam satu arah: baris atau kolom. Ini cocok untuk menu horizontal, tombol yang bersebelahan, atau layout kecil yang itemnya perlu rapi dalam satu jalur.

Parent yang diberi display: flex menjadi flex container. Anak langsung di dalamnya menjadi flex item. gap memberi jarak antar item. justify-content mengatur posisi item di arah utama, sedangkan align-items mengatur posisi di arah silang.

Bagian ini memengaruhi progres lesson.

Contoh Flexbox sederhana

Wajib

html

<div class="layout">
  <div class="card">HTML</div>
  <div class="card">CSS</div>
  <div class="card">JavaScript</div>
</div>

Elemen .layout akan menjadi flex container. Tiga .card di dalamnya akan menjadi flex item.

Bagian ini memengaruhi progres lesson.

CSS untuk menyusun card

Wajib

css

.layout {
  display: flex;
  gap: 16px;
  align-items: center;
}

display: flex mengaktifkan Flexbox. gap memberi jarak antar card. align-items membantu merapikan posisi item pada arah silang.

Bagian ini memengaruhi progres lesson.

Tips

Opsional

Kapan Flexbox cocok?

Flexbox paling cocok saat kamu menyusun elemen dalam satu arah, misalnya menu horizontal, tombol bersebelahan, atau layout kecil baris/kolom.

Opsional, tidak menghambat penyelesaian lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Property apa yang membuat sebuah elemen menjadi flex container?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Menyusun card dengan Flexbox

Latihan memakai display flex, gap, dan align-items untuk menyusun card dalam satu baris.

Tujuan awal: Targetkan .layout.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis3 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

Flexbox menyusun elemen dalam satu arah.
display: flex dipasang di parent.
Anak langsung menjadi flex item.
gap memberi jarak antar item.
Berikutnya kamu akan memakai Flexbox untuk membuat navbar.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Flexbox menyusun item dalam satu arah.

Memuat progres Review module