A. Pengertian Flexbox

Flexbox digunakan untuk mengatur layout satu dimensi.

Sangat sering digunakan dalam website modern.

---

Struktur Dasar

HTML

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS

.container{
    display:flex;
}

---

Hasil

[1] [2] [3]

---

B. Justify Content

Mengatur posisi horizontal.

justify-content:center;

Nilai lain:

space-between
space-around
space-evenly
flex-start
flex-end

---

C. Align Items

Mengatur posisi vertikal.

align-items:center;

---

Praktik 1

<div class="container">
    <div class="box">HTML</div>
    <div class="box">CSS</div>
    <div class="box">JS</div>
</div>

.container{
    display:flex;
    justify-content:center;
    gap:20px;
}

---

Latihan

Buat 4 kotak berjajar menggunakan Flexbox.

---

Tugas Praktik

Buat menu navigasi horizontal:

Home
Profil
Galeri
Kontak

Menggunakan Flexbox.