MODUL BELAJAR HARI 8-9 — Belajar Flexbox untuk Layout Responsif

Materi Hari Ini:

✅ Apa itu Flexbox dan kenapa penting?
✅ Struktur dasar Flexbox.
✅ Menggunakan Flexbox untuk membuat layout yang rapi.
✅ Praktik: Membuat layout kartu profil responsif.

1. Apa Itu Flexbox?

Flexbox (Flexible Box) adalah metode layout CSS yang mempermudah pengaturan elemen di dalam container. Dengan Flexbox, kamu bisa:
✔️ Mengatur elemen dalam satu baris atau kolom.
✔️ Membuat elemen rata tengah dengan mudah.
✔️ Membuat layout responsif tanpa ribet.

2. Struktur Dasar Flexbox

Buat file flexbox.html lalu tambahkan kode ini:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Website Flexbox</h1>
    </header>

    <main>
        <section class="container">
            <div class="card">Box 1</div>
            <div class="card">Box 2</div>
            <div class="card">Box 3</div>
        </section>
    </main>

    <footer>
        <p>© 2025 Belajar Flexbox - Cloudi 🚀</p>
    </footer>
</body>
</html>

3. Styling dengan CSS

Tambahkan kode berikut ke style.css agar tampilan rapi:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    margin: 0;
    padding: 0;
}

header {
    background-color: #004080;
    color: white;
    padding: 20px;
}

.container {
    display: flex;
    justify-content: space-around; /* Meratakan elemen secara seimbang */
    align-items: center;
    margin: 20px;
    gap: 10px;
}

.card {
    background: white;
    padding: 20px;
    width: 100px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #002040;
    color: white;
    padding: 10px;
    margin-top: 20px;
}

4. PR Praktik Hari 8-9

✅ Tambahkan lebih banyak box ke dalam container!

Coba buat 6 atau lebih .card dalam container.

✅ Coba ubah arah Flexbox!

Ubah flex-direction: row; menjadi column; untuk melihat perubahan.

✅ Eksperimen dengan justify-content & align-items!

Coba gunakan center, flex-start, atau flex-end.

Cari Blog Ini

Meureuno Website