Praktik Flexbox

by oktaviardi pratama

HTML

<!-- 1. Navbar -->
    <div class="section">
        <h3>1. Navbar (Flex Row)</h3>
        <div class="navbar">
            <div class="box" style="margin:0; padding: 10px;">Logo</div>
            <div class="nav-links">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </div>
        </div>
    </div>

    <!-- 2. Card Layout -->
    <div class="section">
        <h3>2. Card Layout (Flex Wrap)</h3>
        <p>Kecilkan layar browser untuk melihat efek <code>flex-wrap</code>.</p>
        <div class="card-container">
            <div class="card">Card 1</div>
            <div class="card">Card 2</div>
            <div class="card">Card 3</div>
            <div class="card">Card 4</div>
        </div>
    </div>

    <!-- 3. Alignment -->
    <div class="section">
        <h3>3. Align Items & Self</h3>
        <div class="align-container">
            <div class="box">Normal</div>
            <div class="box item-special">Stretch (Special)</div>
            <div class="box">Normal</div>
        </div>
    </div>

CSS

body { font-family: sans-serif; padding: 20px; background: #f9f9f9; }
        .section { margin-bottom: 40px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        h3 { margin-top: 0; border-bottom: 2px solid #eee; padding-bottom: 10px; }

        .box {
            background: #3498db; color: white; padding: 20px;
            margin: 5px; text-align: center; border-radius: 4px; font-weight: bold;
        }

        /* 1. NAVBAR (Row & Space Between) */
        .navbar {
            display: flex;
            justify-content: space-between; /* Logo kiri, Menu kanan */
            align-items: center;            /* Vertikal tengah */
            background: #333; padding: 15px; border-radius: 4px;
        }
        .nav-links a { color: white; text-decoration: none; margin-left: 15px; }

        /* 2. CARD LAYOUT (Wrap & Grow) */
        .card-container {
            display: flex;
            flex-wrap: wrap; /* Turun baris jika layar sempit */
            gap: 10px;
        }
        .card {
            background: #fff; color: #333; border: 1px solid #ddd;
            /* flex: grow shrink basis */
            flex: 1 1 200px; /* Bisa tumbuh, bisa menyusut, dasar 200px */
            padding: 20px; border-radius: 4px;
        }

        /* 3. ALIGNMENT & SELF */
        .align-container {
            display: flex;
            height: 150px;
            background: #eee;
            align-items: center; /* Semua tengah vertikal */
        }
        .item-special {
            align-self: stretch; /* Item ini khusus tinggi penuh */
            background: #e74c3c;
        }