Tata Letak Flexbox Umum: Nav, Kartu, Objek Media
Bangun bilah navigasi, kisi kartu, dan objek media praktis menggunakan flexbox.
Tata Letak Flexbox Umum: Nav, Kartu, Objek Media adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Mengapa Pola Flexbox Penting
Pola tata letak tertentu muncul di hampir setiap proyek web. Flexbox menyelesaikan masing-masing pola secara efisien dengan CSS yang minimal. Mengetahui pola-pola ini berarti pengembangan yang lebih cepat dan kode yang lebih sedikit.
Pola Bilah Navigasi
Navigasi horizontal dengan logo di sebelah kiri dan tautan di sebelah kanan:
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Bagian Utama Terpusat
Konten setinggi penuh yang dipusatkan dengan Flexbox:
<div class="hero">
<h1>Welcome</h1>
</div>
Grid Kartu
Grid kartu responsif dengan pembungkusan dan celah yang konsisten:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Objek Media
Objek media—gambar dengan lebar tetap di samping teks fleksibel—adalah pola UI dasar yang digunakan dalam komentar, kiriman sosial, dan item daftar:
<div class="media">
<img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
<div class="media-body">
<strong>Jane Doe</strong>
<p>Comment text goes here.</p>
</div>
</div>
Footer Melekat dengan Flex
Dorong footer ke bagian bawah tanpa menetapkan tinggi tetap:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Tombol Ikon + Teks
Ikon + teks yang dipusatkan secara vertikal di dalam tombol:
<button class="btn">
<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
Download
</button>
Holy Grail dengan Flexbox
Tata letak Holy Grail tiga kolom (header, footer, bilah sisi-konten utama-bilah sisi):
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Baris Formulir dengan Label
Pasangan label-input yang diratakan dalam baris formulir:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Galeri Gambar Mini
Galeri gambar berbasis pembungkusan:
<div class="gallery">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>
Daftar Chip/Label
Chip/label sebaris yang membungkus dan mengalir seperti teks:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Pemeriksaan Singkat
Dalam pola objek media, apa yang mencegah isi teks meluap jika berisi string panjang yang tidak dapat diputus?
Ringkasan
Pola Flexbox umum: bilah navigasi (logo + margin otomatis + tautan), bagian utama (kolom + perataan utama di tengah), objek media (gambar tetap + isi flex:1 dengan min-width:0), footer melekat (badan kolom + bagian utama flex:1), grid kartu (pembungkusan + flex:1 1 Xpx). Kelima pola ini mencakup sebagian besar kebutuhan tata letak di dunia nyata.
Belajar CSS dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tata Letak Flexbox Umum: Nav, Kartu, Objek Media” gratis?
Ya — teks lengkap “Tata Letak Flexbox Umum: Nav, Kartu, Objek Media” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Tata Letak Flexbox Umum: Nav, Kartu, Objek Media”?
Bangun bilah navigasi, kisi kartu, dan objek media praktis menggunakan flexbox. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Tata Letak Flexbox Umum: Nav, Kartu, Objek Media” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Penggantian Perataan Item Flex dengan align-self
- Properti Order dan Pengurutan Visual
- Pola Shorthand Flex
- Tata Letak Flexbox Umum: Nav, Kartu, Objek Media