Flexbox ialah alat CSS berkuasa yang menjadikan reka letak responsif dan fleksibel lebih mudah berbanding sebelum ini. Ia memudahkan tugas seperti menjajarkan elemen, mengurus jarak dan menyesuaikan reka letak untuk saiz skrin yang berbeza.
Dalam blog ini, kami akan membincangkan asas Flexbox, menerangkan cara sifatnya berfungsi dan memberikan contoh praktikal yang boleh anda gunakan dalam projek anda. Pada akhirnya, anda akan mempunyai kemahiran untuk membuat reka letak yang kelihatan hebat pada mana-mana peranti. Mari mulakan!
Apabila membuat reka letak dengan CSS, terdapat beberapa kaedah untuk dipilih, setiap satu dengan kekuatannya. Mari kita lihat bagaimana Flexbox, Grid dan Float berbeza antara satu sama lain.
Flexbox direka untuk susun atur satu dimensi. Ia berfungsi paling baik apabila anda perlu menjajarkan elemen dalam satu baris atau lajur, menjadikannya sesuai untuk reka letak yang lebih ringkas seperti bar navigasi, kandungan berpusat atau elemen bentuk.
Kekuatan:
Bila Penggunaan:
Grid ialah alat reka letak yang lebih berkuasa yang membolehkan anda membuat kedua-dua baris dan lajur. Tidak seperti Flexbox, yang mengendalikan hanya satu dimensi pada satu masa, Grid sangat bagus untuk mencipta reka letak yang kompleks seperti reka bentuk berbilang lajur atau reka letak keseluruhan halaman.
Kekuatan:
Bila Penggunaan:
Float pada asalnya digunakan untuk tujuan pembungkusan teks dan reka letak, tetapi kini dianggap lapuk untuk tugas reka letak umum. Ia boleh membuat reka letak, tetapi selalunya memerlukan kerja tambahan untuk mengosongkan apungan dan mengurus jarak.
Kekuatan:
Bila Penggunaan:
Nota:
Untuk bermula dengan Flexbox, adalah penting untuk memahami sifat teras yang mentakrifkan kelakuannya. Di sini, kami akan membincangkan sifat Flexbox yang paling penting dan menerangkan cara ia berfungsi bersama untuk membuat reka letak yang fleksibel.
1. paparan: lentur
Paparan: sifat flex ialah asas bagi mana-mana susun atur Flexbox. Dengan menggunakan sifat ini pada bekas, anda mengubahnya menjadi bekas fleksibel dan elemen anaknya menjadi item fleksibel. Ini membolehkan anda menggunakan semua sifat penjajaran dan susun atur berkuasa yang ditawarkan oleh Flexbox.
.container {
display: flex;
}
2. arah lentur
Sifat arah lentur mentakrifkan arah di mana item lentur disusun. Ia boleh menjadi salah satu daripada empat nilai:
Contoh:
.container {
display: flex;
flex-direction: column;
}
3. mewajarkan-kandungan
Sifat justify-content menjajarkan item flex sepanjang paksi utama (arah yang ditetapkan oleh flex-direction). Ia membantu mengagihkan ruang antara dan sekeliling item.
Contoh:
.container {
display: flex;
justify-content: center;
}
4. align-item
Sifat item jajar menjajarkan item lentur di sepanjang paksi silang (berserenjang dengan paksi utama). Ia mengawal penjajaran item secara menegak apabila arah flex adalah baris atau mendatar apabila arah adalah lajur.
Contoh:
.container {
display: flex;
}
Apabila arah lentur: baris, paksi utama adalah mendatar dan paksi silang adalah menegak.
Apabila arah lentur: lajur, paksi utama adalah menegak dan paksi silang adalah mendatar.
Sekarang kita telah membincangkan asas Flexbox, mari lihat beberapa contoh mudah untuk melihat cara ia berfungsi dalam tindakan.
1. Elemen Pemusatan
Flexbox menjadikan elemen pemusatan secara mendatar dan menegak menjadi mudah.
HTML:
.container {
display: flex;
flex-direction: column;
}
Keputusan:
2. Mencipta Bar Navigasi Mudah
Flexbox bagus untuk mencipta bar navigasi mendatar.
HTML:
.container {
display: flex;
justify-content: center;
}
Keputusan:
3. Membina Grid Responsif Mudah
Flexbox juga boleh digunakan untuk mencipta grid responsif ringkas tanpa memerlukan pertanyaan media.
HTML:
.container {
display: flex;
align-items: center;
}
Keputusan:
Contoh ini menunjukkan hanya beberapa reka letak berkuasa yang boleh anda buat dengan Flexbox. Apabila anda semakin selesa dengannya, anda boleh menggabungkan teknik ini untuk membina reka bentuk yang lebih kompleks.
Dalam bahagian ini, kami akan meneroka beberapa ciri Flexbox yang lebih maju, seperti bekas bersarang, pesanan dan flex-wrap. Teknik ini akan memberi anda lebih kawalan ke atas reka letak anda dan membolehkan reka bentuk yang kompleks.
1. Bekas Flex Bersarang
Kadangkala, anda mungkin perlu membuat reka letak dalam reka letak. Flexbox membolehkan anda meletakkan bekas flex di dalam satu sama lain untuk lebih kawalan.
HTML:
.container {
display: flex;
}
Keputusan:
Dalam contoh ini, bekas .luar ialah bekas fleksibel, dan di dalamnya terdapat dua bekas fleksibel bekas .dalam bersarang. Ini membolehkan anda membina reka letak yang lebih kompleks dalam bekas fleksibel utama.
2. Menggunakan pesanan untuk Menukar Pesanan Item
Flexbox membolehkan anda mengawal susunan item menggunakan sifat pesanan. Secara lalai, semua item dipesan berdasarkan kedudukan HTML mereka. Tetapi dengan tertib, anda boleh menukar susunan visual tanpa mengubah suai HTML.
HTML:
.container {
display: flex;
flex-direction: column;
}
Keputusan:
Dalam contoh ini, kami menukar susunan item, walaupun kedudukannya dalam HTML ialah 1-2-3. Sifat pesanan membolehkan anda menyusun semula item secara visual.
3. Menggunakan flex-wrap untuk Membenarkan Item Membungkus
Sifat flex-wrap membolehkan item flex dibalut pada berbilang baris apabila ruang tidak mencukupi. Ini amat berguna untuk reka letak responsif di mana anda mahu item disesuaikan dengan saiz skrin yang berbeza.
HTML:
.container {
display: flex;
justify-content: center;
}
Keputusan:
Dalam contoh ini, sifat flex-wrap: wrap membenarkan item untuk membalut ke baris seterusnya jika ruang tidak mencukupi, menjadikannya alat yang hebat untuk mencipta reka letak responsif.
Nota:
Teknik lanjutan ini memberikan anda lebih fleksibiliti dan kawalan apabila membina reka letak dengan Flexbox.
Walaupun Flexbox berkuasa, beberapa perangkap biasa boleh membawa kepada hasil yang tidak dijangka. Berikut ialah beberapa kesilapan yang mungkin anda hadapi dan petua untuk mengelakkannya:
1. Limpahan yang tidak disengajakan
Masalahnya:
Item fleksibel mungkin melimpahi bekas jika kandungannya tidak mengecut seperti yang dijangkakan.
Contoh:
.container {
display: flex;
}
Dalam contoh ini, teks panjang menolak reka letak keluar dari bekas.
Pembetulan:
Gunakan sifat flex-shrink atau tambah limpahan: tersembunyi; atau balutan kata: kata putus;.
.container {
display: flex;
flex-direction: column;
}
2. Tidak Mengakaunkan Margin Lalai
Masalahnya:
Penyemak imbas selalunya menggunakan margin lalai pada elemen seperti
atau
Contoh:
.container {
display: flex;
justify-content: center;
}
Jing lalai boleh menyebabkan jarak tidak sekata, menjadikan reka letak kelihatan tidak seimbang.
Pembetulan:
Tetapkan semula jidar dengan tetapan semula CSS atau tetapkan jidar secara eksplisit untuk elemen anda.
.container {
display: flex;
align-items: center;
}
3. Menggunakan flex: 1 Tanpa Memahami Gelagatnya
Masalahnya:
Tetapan fleksibel: 1 menjadikan item berkembang dan mengecut sama, yang boleh membawa kepada hasil yang tidak dijangka jika kandungan satu item jauh lebih besar daripada yang lain.
Pembetulan:
Perhalusi sifat flex dengan menyatakan nilai tumbuh, mengecut dan asas. Contohnya:
<div>
<p><strong>CSS:</strong><br>
</p>
<pre class="brush:php;toolbar:false">.container {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
height: 100vh; /* Full viewport height */
}
4. Salah faham align-item dan justify-content
Masalahnya:
Item penjajaran yang mengelirukan (mengawal paksi silang) dan kandungan justify (mengawal paksi utama) boleh membawa kepada reka letak yang tidak berkelakuan seperti yang diharapkan.
Pembetulan:
Sentiasa ingat:
5. Melupakan flex-wrap untuk Reka Letak Responsif
Masalahnya:
Secara lalai, Flexbox tidak membalut item, yang boleh menyebabkan ia mengecut terlalu banyak pada skrin yang lebih kecil.
Pembetulan:
Tambah flex-wrap: wrap; untuk memastikan item bergerak ke baris seterusnya apabila ruang tidak mencukupi.
.container {
display: flex;
}
Nota:
Mengelakkan kesilapan biasa ini akan membantu anda membuat reka letak yang fleksibel dan menarik secara visual. Ingat petua ini untuk memanfaatkan sepenuhnya ciri hebat Flexbox!
Flexbox bersinar dalam senario di mana fleksibiliti dan responsif adalah penting. Berikut ialah beberapa aplikasi praktikal di mana Flexbox terbukti paling berfaedah:
1. Mencipta Reka Letak Responsif
Flexbox memudahkan proses mereka bentuk reka letak yang menyesuaikan dengan lancar kepada saiz skrin yang berbeza. Sama ada reka bentuk yang mengutamakan mudah alih atau reka letak berpusatkan desktop, Flexbox menjadikan penjajaran dan jarak menjadi mudah.
.container {
display: flex;
flex-direction: column;
}
2. Mengendalikan Kandungan Dinamik
Dengan Flexbox, anda boleh mengurus reka letak dengan mudah di mana saiz kandungan tidak ditetapkan. Item akan melaraskan secara automatik agar sesuai dengan ruang tanpa melanggar reka bentuk.
Contoh: Memaparkan senarai catatan blog dengan tajuk dan huraian yang berbeza-beza, memastikan ia sejajar tanpa mengira panjang kandungan.
.container {
display: flex;
justify-content: center;
}
3. Membina Bar Navigasi
Flexbox sesuai untuk mencipta bar navigasi yang dijajarkan secara mendatar dan elemen ruang sama rata. Anda juga boleh membuat navigasi menyesuaikan diri dengan skrin yang lebih kecil dengan membungkus item.
.container {
display: flex;
align-items: center;
}
4. Memusatkan Kandungan
Flexbox menjadikan memusatkan kandungan pada halaman (kedua-dua menegak dan mendatar) dengan mudah. Ini amat berguna untuk skrin percikan, mod atau bahagian wira.
<div>
<p><strong>CSS:</strong><br>
</p>
<pre class="brush:php;toolbar:false">.container {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
height: 100vh; /* Full viewport height */
}
5. Mencipta Kad Sama Tinggi
Dalam kebanyakan reka bentuk, elemen seperti kad perlu mempunyai ketinggian yang sama tanpa mengira panjang kandungan. Flexbox memastikan ketinggian dan penjajaran yang konsisten tanpa godam tambahan.
<nav>
<p><strong>CSS:</strong><br>
</p>
<pre class="brush:php;toolbar:false">.navbar {
display: flex;
justify-content: space-around; /* Evenly spaces the links */
background-color: #333;
}
.navbar a {
color: white;
padding: 10px 20px;
text-decoration: none;
}
Nota:
Flexbox ialah penyelesaian yang sesuai untuk mencipta reka letak responsif dan dinamik, mengendalikan pelbagai saiz kandungan dan memudahkan penjajaran. Sama ada anda mereka bentuk untuk mudah alih atau desktop, Flexbox memastikan reka letak anda berfungsi dan menarik secara visual.
Untuk menjadikan konsep Flexbox lebih mudah difahami, kami akan menyertakan gambar rajah, contoh kod langsung dan coretan kod yang diserlahkan sintaks. Alat bantuan visual dan contoh interaktif memastikan anda memahami idea utama dengan berkesan.
1. Memahami Paksi dengan Gambarajah
Flexbox menggunakan dua paksi:
Berikut ialah perwakilan visual:
2. Contoh Interaktif
Contoh 1: Memusatkan Item
Contoh CodePen ini menunjukkan cara untuk memusatkan item secara menegak dan mendatar:
3. Menggambarkan Penjajaran dengan Penserlahan Sintaks
Contoh 2: Menjajarkan Item Fleksibel
Gunakan sifat align-item untuk mengawal penjajaran menegak pada paksi silang.
.container {
display: flex;
}
4. Demo Langsung untuk Bekas Bersarang
Bekas Flexbox bersarang boleh menunjukkan reka letak lanjutan. Lihat contoh Codepen ini:
Petua untuk Pembaca
Nota:
Bantuan visual, contoh langsung dan coretan yang diserlahkan sintaks menjadikan pembelajaran Flexbox lebih interaktif dan menarik. Terokai pautan dan rajah yang disediakan untuk mengukuhkan pemahaman anda.
Flexbox bukan sekadar alat untuk mencipta reka letak yang menarik secara visual; ia juga membantu meningkatkan kebolehcapaian web apabila digunakan dengan betul. Reka letak yang boleh diakses memastikan tapak web anda boleh digunakan oleh semua orang, termasuk orang kurang upaya.
1. HTML semantik dengan Flexbox
Flexbox berpasangan dengan baik dengan elemen HTML semantik seperti
Semak penghunian port dalam linux
Bagaimana untuk membuka format TIF dalam tingkap
Apakah perisian lukisan?
Apakah kaedah penyimpanan data?
Bagaimana untuk menggunakan pernyataan sisip dalam mysql
Masa terputus perkhidmatan Windows 10
Pengumpulan kekunci pintasan komputer
Bagaimana untuk menyelesaikan masalah kehilangan steam_api.dll
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
