Flexbox untuk Tata Letak
Gunakan Flexbox untuk meratakan item dalam baris atau kolom, membagi ruang, dan membungkus konten tanpa trik float.
Flexbox untuk Tata Letak adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Flexbox?
Flexbox (Tata Letak Kotak Fleksibel) adalah model tata letak CSS yang dirancang untuk tata letak satu dimensi — mendistribusikan ruang sepanjang satu baris atau kolom. Flexbox menyelesaikan masalah yang tidak dapat ditangani dengan baik oleh tata letak berbasis float.
Mengaktifkan Flexbox
Terapkan display: flex pada container. Anak langsungnya otomatis menjadi item fleksibel. Anak dari item tersebut tidak terpengaruh.
.container {
display: flex;
}
/* All direct children are now flex items */flex-direction
Menetapkan sumbu utama. row (bawaan): item disusun dari kiri ke kanan. row-reverse: dari kanan ke kiri. column: dari atas ke bawah. column-reverse: dari bawah ke atas.
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }justify-content — Penyelarasan Sumbu Utama
Mendistribusikan ruang sepanjang sumbu utama. flex-start (bawaan), flex-end, center, space-between, space-around, space-evenly.
.nav {
display: flex;
justify-content: space-between; /* logo left, links right */
}
.centered {
display: flex;
justify-content: center; /* items in the middle */
}align-items — Penyelarasan Sumbu Silang
Menyelaraskan item sepanjang sumbu silang (tegak lurus terhadap sumbu utama). stretch (bawaan), center, flex-start, flex-end, baseline.
.card {
display: flex;
align-items: center; /* vertically center content */
}Properti gap
gap: row-gap column-gap menambahkan ruang di antara item fleksibel tanpa menggunakan margin. Jauh lebih rapi daripada cara menggunakan margin. Didukung secara luas oleh peramban modern.
.grid {
display: flex;
flex-wrap: wrap;
gap: 24px; /* 24px in all directions between items */
gap: 16px 24px; /* row-gap column-gap */
}flex-wrap
Secara bawaan, item fleksibel dipadatkan ke dalam satu baris. flex-wrap: wrap memungkinkan item meluber ke baris baru saat tidak cukup ruang. Gabungkan dengan gap untuk membuat kisi responsif sederhana.
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow, shrink, min-width */
}Singkatan flex pada Item
flex: grow shrink basis pada item fleksibel. flex: 1 adalah singkatan dari 1 1 0% — item tumbuh secara setara dan mengabaikan ukuran kontennya. flex: 0 0 200px membuat item tetap berukuran 200px.
.sidebar { flex: 0 0 240px; } /* fixed width */
.main { flex: 1; } /* takes remaining space */align-self
align-self pada item fleksibel mengesampingkan align-items milik container untuk item tersebut. Berguna untuk membuat satu item memiliki penyelarasan yang berbeda dari saudaranya.
.container { display: flex; align-items: center; }
.tall-item { align-self: flex-start; }Properti order
order mengatur urutan visual item fleksibel tanpa mengubah urutan HTML. Nilai bawaannya adalah 0. Nilai yang lebih kecil tampil lebih dahulu. Gunakan seperlunya — ini menciptakan ketidaksesuaian antara urutan visual dan urutan DOM/pembacaan.
Memusatkan dengan Flexbox
Cara paling sederhana untuk memusatkan elemen secara horizontal dan vertikal: tetapkan induknya ke display: flex; justify-content: center; align-items: center.
.overlay {
position: fixed;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
}Pemeriksaan Singkat
Properti Flexbox mana yang mendistribusikan ruang di antara item sepanjang sumbu utama?
Ringkasan: Dasar-Dasar Flexbox
display: flex pada container. flex-direction: row atau column untuk sumbu. justify-content untuk jarak pada sumbu utama. align-items untuk sumbu silang. gap untuk jarak antaritem. flex-wrap untuk beberapa baris. Singkatan flex pada item untuk pertumbuhan. Sistem tata letak satu dimensi yang serbaguna.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Flexbox untuk Tata Letak” gratis?
Ya — teks lengkap “Flexbox untuk Tata Letak” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Flexbox untuk Tata Letak”?
Gunakan Flexbox untuk meratakan item dalam baris atau kolom, membagi ruang, dan membungkus konten tanpa trik float. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 2 dari 4.
Berapa lama pelajaran “Flexbox untuk Tata Letak” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Tag Meta Area Tampilan
- Flexbox untuk Tata Letak
- CSS Grid untuk Tata Letak
- Kueri Media dan Pengembangan Mobile-First