Pendalaman Flexbox: Perataan, Pembungkusan, Urutan
Kuasai justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis, dan properti order.
Pendalaman Flexbox: Perataan, Pembungkusan, Urutan adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Tinjauan: Kontainer dan Item Flex
Rangkuman: display: flex pada kontainer membuat item flex dari elemen anak langsung. Sumbu utama berjalan mengikuti flex-direction. Sumbu silang tegak lurus terhadapnya.
Nilai justify-content secara Mendetail
Semua nilai justify-content pada kontainer dengan arah baris: flex-start (bawaan), flex-end, center, space-between (jarak hanya di antara item), space-around (margin yang sama di sekitar setiap item), space-evenly (jarak yang sama di semua tempat).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }align-items dibandingkan dengan align-content
align-items menyelaraskan item dalam satu baris. align-content menyelaraskan beberapa baris (hanya berfungsi ketika flex-wrap bernilai wrap dan terdapat beberapa baris).
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}align-self pada Item Individual
align-self mengesampingkan align-items untuk item flex tertentu. Berguna untuk membuat satu item merenggang sementara item lainnya berada di tengah.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */flex-wrap: wrap dan wrap-reverse
flex-wrap: wrap memungkinkan item mengalir ke baris baru. wrap-reverse membungkus item, tetapi ke arah sebaliknya. Gabungkan dengan gap untuk membuat kisi responsif sederhana.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}flex-grow, flex-shrink, flex-basis
Singkatan flex yang terdiri dari tiga bagian pada item. flex-grow: bagian dari ruang yang tersedia. flex-shrink: tingkat penyusutan ketika ruang terbatas. flex-basis: ukuran awal sebelum membesar atau menyusut.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */Singkatan flex yang Umum
flex: 1 = 1 1 0%. flex: auto = 1 1 auto. flex: none = 0 0 auto. flex: 2 = 2 1 0% (mengambil ruang dua kali lebih banyak daripada flex: 1).
Properti order
order mengubah urutan visual item flex tanpa mengubah HTML. Nilai bawaannya adalah 0. Nilai negatif muncul sebelum 0. Gunakan dengan hati-hati — ketidaksesuaian antara urutan visual dan urutan DOM dapat membingungkan pengguna papan ketik dan pembaca layar.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */min-width: 0 untuk Memperbaiki Luapan
Item flex memiliki min-width: auto implisit, yang berarti item tidak akan menyusut di bawah ukuran kontennya. Tetapkan min-width: 0 agar item dapat menyusut lebih kecil — hal ini penting untuk pemotongan teks di dalam item flex.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Jarak Flex Tanpa gap
Dalam lingkungan lama yang belum mendukung gap, gunakan margin pada item dan margin negatif pada kontainer untuk membuat jarak antaritem. Namun saat ini, gap didukung di semua peramban modern — sebaiknya gunakan gap.
Kontainer Flex Bertingkat
Item flex apa pun dapat menjadi kontainer flex itu sendiri. Susun Flexbox secara bertingkat untuk tata letak yang kompleks: deretan kartu yang bagian dalam setiap kartunya juga diatur dengan flex. Ini adalah pola yang umum dalam tata letak modern.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}Pemeriksaan Cepat
Properti mana yang mendistribusikan ruang di antara item flex sepanjang sumbu silang ketika flex-wrap bernilai wrap?
Rangkuman: Pendalaman Flexbox
justify-content untuk distribusi pada sumbu utama. align-items untuk sumbu silang satu baris. align-content untuk sumbu silang beberapa baris. align-self untuk setiap item. flex-wrap: wrap mengaktifkan beberapa baris. Singkatan flex mengatur pertumbuhan, penyusutan, dan basis. order mengubah urutan visual. min-width: 0 mencegah masalah penyusutan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pendalaman Flexbox: Perataan, Pembungkusan, Urutan” gratis?
Ya — teks lengkap “Pendalaman Flexbox: Perataan, Pembungkusan, Urutan” 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 “Pendalaman Flexbox: Perataan, Pembungkusan, Urutan”?
Kuasai justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis, dan properti order. 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 1 dari 4.
Berapa lama pelajaran “Pendalaman Flexbox: Perataan, Pembungkusan, Urutan” 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
- Pendalaman Flexbox: Perataan, Pembungkusan, Urutan
- CSS Grid: template-areas, auto-fit, minmax
- Menggabungkan Flexbox dan Grid
- Variabel CSS untuk Tema