CSS Layout Flexbox
1. Penjelasan
Flexbox (Flexible Box Layout Model) adalah cara modern untuk mengatur elemen-elemen di dalam sebuah container secara satu dimensi, baik secara horizontal (baris) maupun vertikal (kolom). Kelibihan utamanya terletak pada kemampuannya untuk mengontrol perataan, distribusi ruang antar elemen, dan urutan elemen dengan sangat mudah, tanpa perlu float yang rumit.
Terdapat 2 istilah dasar yang penting untuk di pahami:
- Flex Container: Elemen induk tempat kamu menerapkan
display: flex. - Flex Items: Elemen-elemen anak langsung yang berada di dalam Flex Container.
Penting: Flexbox bekerja pada elemen langsung. Jika elemen anak dari container itu sendiri memiliki elemen anak (cucu), Flexbox tidak akan secara otomatis mengontrol elemen cucu tersebut kecuali kamu menerapkan display: flex lagi pada elemen anak tersebut (membuat Flex Container bersarang).
2. Contoh
Berikut adalah cara menggunakan Flexbox secara dasar:
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>.flex-container {
display: flex; /* Mengaktifkan Flexbox */
/* Properti Container */
flex-direction: row; /* Default: baris. Bisa juga 'column' (kolom). */
justify-content: center; /* Perataan horizontal: rata tengah. Pilihan lain: flex-start, flex-end, space-between, space-around, space-evenly. */
align-items: stretch; /* Perataan vertikal: meregang. Pilihan lain: flex-start, flex-end, center, baseline. */
}
.flex-item {
/* Properti Item (Opsional) */
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
}3. Studi Kasus: Membuat Navbar Responsif
Bayangkan kamu ingin membuat header/navbar dengan logo di kiri, tautan navigasi di tengah, dan tombol login di kanan.
<header class="navbar">
<div class="logo">My Website</div>
<nav class="nav-links">
<a href="#">Beranda</a>
<a href="#">Produk</a>
<a href="#">Kontak</a>
</nav>
<button class="login-btn">Login</button>
</header>.navbar {
display: flex; /* Mengaktifkan Flexbox pada header */
justify-content: space-between; /* Mendistribusikan elemen dengan ruang kosong yang sama di antara mereka, mendorong logo ke kiri dan tombol login ke kanan. */
align-items: center; /* Meratakan elemen-elemen secara vertikal di tengah. */
background-color: #333;
color: white;
padding: 10px 20px;
}
.nav-links {
display: flex; /* Mengaktifkan Flexbox pada container tautan untuk perataan mereka sendiri */
gap: 20px; /* Memberikan jarak antar link secara merata. */
}
.nav-links a {
color: white;
text-decoration: none;
}
.login-btn {
background-color: #f44336;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}