Susun Atur Flexbox Lazim: Nav Kad Objek Media
Bina bar navigasi, grid kad dan objek media praktikal menggunakan flexbox.
Susun Atur Flexbox Lazim: Nav Kad Objek Media ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Mengapa Pola Flexbox Penting
Pola susun atur tertentu muncul dalam hampir setiap projek web. Flexbox menyelesaikan setiap pola dengan cekap menggunakan CSS yang minimum. Mengetahui pola ini bermakna pembangunan lebih pantas dan kod yang lebih sedikit.
Pola Bar Navigasi
Navigasi mendatar dengan logo di sebelah kiri dan pautan 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>
Bahagian Utama Berpusat
Kandungan berpusat setinggi penuh dengan Flexbox:
<div class="hero">
<h1>Welcome</h1>
</div>
Grid Kad
Grid kad responsif dengan pembalutan dan ruang antara yang konsisten:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Objek Media
Objek media — imej berlebar tetap di sebelah teks fleksibel — ialah pola antara muka pengguna asas yang digunakan dalam komen, kiriman sosial dan item senarai:
<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>
Pengaki Melekat dengan Flex
Tolak pengaki ke bahagian bawah tanpa menetapkan ketinggian tetap:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Butang Ikon + Teks
Ikon + teks yang berpusat secara menegak dalam butang:
<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>
Susun Atur Tiga Lajur dengan Flexbox
Susun atur tiga lajur (pengepala, pengaki, bar sisi-kandungan utama-bar 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 Borang dengan Label
Pasangan label-input yang dijajarkan dalam baris borang:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Galeri Imej Kecil
Galeri imej berasaskan pembalutan:
<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>
Senarai Cip/Label
Cip/label sebaris yang membalut dan mengalir seperti teks:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Semakan Pantas
Dalam pola objek media, apakah yang menghalang isi teks daripada melimpah jika kandungannya ialah rentetan panjang yang tidak boleh dipisahkan?
Ulang Kaji
Pola Flexbox yang biasa: bar navigasi (logo + jidar automatik + pautan), bahagian utama (lajur + penjajaran tengah), objek media (imej tetap + isi flex:1 dengan min-width:0), pengaki melekat (isi berbentuk lajur + utama flex:1), grid kad (pembalutan + flex:1 1 Xpx). Lima pola ini merangkumi sebahagian besar keperluan susun atur dunia sebenar.
Pelajari CSS dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Susun Atur Flexbox Lazim: Nav Kad Objek Media” percuma?
Ya — teks penuh “Susun Atur Flexbox Lazim: Nav Kad Objek Media” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Susun Atur Flexbox Lazim: Nav Kad Objek Media”?
Bina bar navigasi, grid kad dan objek media praktikal menggunakan flexbox. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Susun Atur Flexbox Lazim: Nav Kad Objek Media” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Mengatasi Penjajaran Item Flex dengan align-self
- Sifat Order dan Penyusunan Semula Visual
- Corak Singkatan Flex
- Susun Atur Flexbox Lazim: Nav Kad Objek Media