CSS Dasar #28 - Membuat Layout dengan Flexbox (Navbar, Card Grid, Footer)

byFerdian Rahabista -
0

Setelah mempelajari berbagai properti flexbox (container dan item), sekarang saatnya menerapkannya dalam layout nyata. Flexbox sangat powerful untuk membuat komponen website seperti navbar responsif, grid kartu, dan footer dengan kode yang bersih dan mudah di-maintenance.

1. Navbar dengan Flexbox

Navbar是现代 website 的 komponen penting. Dengan flexbox, kita bisa membuat navbar dengan logo di kiri dan menu navigasi di kanan, serta responsif untuk layar kecil.

Struktur Navbar:

<nav class="navbar">
    <div class="logo">MyWebsite</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS Flexbox untuk Navbar:

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e293b;
    padding: 15px 40px;
    flex-wrap: wrap;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

/* Responsive untuk HP */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .nav-links {
        flex-direction: column;
        gap: 10px;
    }
}

Navbar dengan flexbox: logo kiri, menu kanan, responsif dengan media query.

2. Card Grid dengan Flexbox

Card grid digunakan untuk menampilkan artikel, produk, atau portofolio. Dengan flex-wrap: wrap, grid akan otomatis menyesuaikan jumlah kolom berdasarkan lebar layar.

Struktur Card Grid:

<div class="card-container">
    <div class="card">...</div>
    <div class="card">...</div>
    // ... lebih banyak card
</div>

CSS Flexbox untuk Card Grid:

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

.card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    width: 280px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}

/* Responsif: di HP card jadi full width */
@media (max-width: 640px) {
    .card {
        width: 100%;
    }
}
Card 1
Card 2
Card 3

Card grid dengan flex-wrap: wrap; secara otomatis menyesuaikan kolom di layar kecil.

3. Footer dengan Flexbox

Footer biasanya berisi beberapa kolom informasi (tentang, kontak, sosial media). Flexbox memudahkan penyusunan kolom yang responsif.

Struktur Footer:

<footer class="footer">
    <div class="footer-container">
        <div class="footer-section">
            <h3>Tentang Kami</h3>
            <p>Deskripsi singkat perusahaan.</p>
        </div>
        <div class="footer-section">
            <h3>Kontak</h3>
            <p>Email: info@example.com</p>
        </div>
        <div class="footer-section">
            <h3>Ikuti Kami</h3>
            <div class="social-links">...</div>
        </div>
    </div>
    <div class="footer-bottom">
        <p>© 2024 MyWebsite. All rights reserved.</p>
    </div>
</footer>

CSS Flexbox untuk Footer:

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.footer-section {
    flex: 1;
    min-width: 200px;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
}
Tentang
Deskripsi singkat
Kontak
info@example.com
Sosial Media
Facebook | Twitter
© 2024 MyWebsite

Contoh Proyek Lengkap: Landing Page dengan Flexbox

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page dengan Flexbox</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
        }
        
        /* Navbar */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #1e293b;
            color: white;
            padding: 15px 40px;
            flex-wrap: wrap;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
            list-style: none;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: #3b82f6;
        }
        
        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 80px 20px;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* Card Container */
        .card-container {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            justify-content: center;
            padding: 60px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .card {
            background: white;
            border-radius: 16px;
            padding: 25px;
            width: 280px;
            text-align: center;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .card-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }
        
        .card h3 {
            margin-bottom: 10px;
        }
        
        /* Footer */
        .footer {
            background: #1e293b;
            color: #94a3b8;
        }
        
        .footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .footer-section {
            flex: 1;
            min-width: 200px;
        }
        
        .footer-section h3 {
            color: white;
            margin-bottom: 15px;
        }
        
        .footer-bottom {
            text-align: center;
            padding: 20px;
            border-top: 1px solid #334155;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            .nav-links {
                flex-direction: column;
                gap: 10px;
            }
            .hero h1 {
                font-size: 32px;
            }
            .footer-container {
                flex-direction: column;
                text-align: center;
            }
        }
        
        @media (max-width: 640px) {
            .card {
                width: 100%;
            }
        }
    </style>
</head>
<body>

    <nav class="navbar">
        <div class="logo">MyBrand</div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <section class="hero">
        <h1>Belajar Flexbox dengan Praktik</h1>
        <p>Layout modern dengan Flexbox: navbar, card grid, dan footer responsif</p>
    </section>

    <div class="card-container">
        <div class="card">
            <div class="card-icon">📱</div>
            <h3>Responsive</h3>
            <p>Layout menyesuaikan semua ukuran layar dengan media query.</p>
        </div>
        <div class="card">
            <div class="card-icon">🚀</div>
            <h3>Modern</h3>
            <p>Menggunakan teknologi Flexbox terbaru.</p>
        </div>
        <div class="card">
            <div class="card-icon">🎨</div>
            <h3>Customizable</h3>
            <p>Mudah diubah sesuai kebutuhan desain.</p>
        </div>
    </div>

    <footer class="footer">
        <div class="footer-container">
            <div class="footer-section">
                <h3>Tentang Kami</h3>
                <p>Kami menyediakan solusi website modern untuk bisnis Anda.</p>
            </div>
            <div class="footer-section">
                <h3>Kontak</h3>
                <p>📧 hello@mybrand.com</p>
                <p>📞 (021) 1234-5678</p>
            </div>
            <div class="footer-section">
                <h3>Ikuti Kami</h3>
                <div>Instagram | Twitter | Facebook</div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>© 2024 MyBrand. All rights reserved.</p>
        </div>
    </footer>

</body>
</html>

Hasil visual landing page:

MyBrand
Home Features Pricing Contact

Belajar Flexbox dengan Praktik

Layout modern dengan Flexbox

📱 Responsive
🚀 Modern
🎨 Customizable
© 2024 MyBrand

Kesalahan Umum dan Tips

  • Lupa flex-wrap → pada container yang sempit, item bisa overflow.
  • Gap tidak didukung browser lama → gunakan margin sebagai alternatif.
  • Navbar tidak responsif → selalu tambahkan media query untuk layar < 768px.
  • Card dengan tinggi tidak sama → biarkan flexbox mengatur secara alami atau gunakan align-items: stretch.

Intisari Hari Ini

  • Navbar → flex dengan justify-content: space-between, responsive dengan media query.
  • Card Grid → flex-wrap: wrap, gap, dan width responsif.
  • Footer → flex dengan beberapa kolom, untuk HP pakai flex-direction: column.
  • Flexbox memudahkan pembuatan layout modern tanpa ribet dengan float atau positioning.
Tantangan: Buat halaman portofolio lengkap dengan navbar (logo kiri, menu kanan), grid portofolio (minimal 6 item), dan footer 3 kolom. Pastikan responsif di HP, tablet, dan desktop. Gunakan efek hover pada card portofolio (scale, shadow). Implementasikan properti flex-grow pada konten utama jika ada sidebar.

Artikel Sebelumnya: CSS Dasar #27 - Properti Flex Item
Artikel Selanjutnya: CSS Dasar #29 - Pengenalan CSS Grid: display: grid, grid-template-columns, grid-template-rows

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال