Flexbox Dibuat Mudah: Buat Reka Letak Fleksibel dengan CSS

Apa itu Flexbox?

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!

Flexbox lwn Grid lwn Float: Perbandingan Mudah

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: Fleksibel dan Satu Dimensi

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:

• Mudah digunakan untuk penjajaran dan pengagihan ruang.
• Sesuai untuk reka bentuk responsif.
• Mengendalikan kandungan dinamik dengan baik.

Bila Penggunaan:

• Untuk menjajarkan dan mengagihkan elemen dalam satu arah (baris atau lajur).
• Apabila anda mahu elemen melaraskan secara automatik berdasarkan ruang yang tersedia.

Grid: Berkuasa untuk Reka Letak Dua Dimensi

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:

• Berfungsi dalam kedua-dua baris dan lajur.
• Sesuai untuk reka letak kompleks dengan berbilang elemen.
• Lebih kawalan ke atas peletakan dan saiz elemen.

Bila Penggunaan:

• Untuk mencipta reka letak halaman yang kompleks, seperti grid halaman penuh atau reka bentuk berbilang lajur.
• Apabila anda memerlukan kawalan tepat ke atas kedua-dua dimensi.

Terapung: Old School dan Limited

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:

• Mudah digunakan untuk tugasan tertentu seperti membungkus teks pada imej.
• Disokong oleh semua penyemak imbas.

Bila Penggunaan:

• Untuk tweak reka letak kecil, seperti membungkus teks pada imej.
• Tidak disyorkan untuk reka letak yang kompleks atau reka bentuk responsif.

Nota:

• Flexbox sesuai untuk reka letak satu dimensi yang lebih ringkas dan menawarkan cara yang cepat dan fleksibel untuk menyusun item.
• Grid lebih baik untuk reka letak dua dimensi, memberikan lebih kawalan ke atas reka bentuk yang kompleks
• Float sudah lapuk untuk reka letak moden dan harus dielakkan memihak kepada Flexbox atau Grid.

Asas Flexbox: Sifat Utama dan Paksi Diterangkan

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.

• Cara ia berfungsi:

.container {
  display: flex;
}

• Kesan: Ini menjadikan bekas itu sebagai bekas fleksibel, dan semua anak langsungnya kini menjadi item fleksibel yang akan mengikut peraturan Flexbox untuk penjajaran dan pengedaran.

2. arah lentur

Sifat arah lentur mentakrifkan arah di mana item lentur disusun. Ia boleh menjadi salah satu daripada empat nilai:

• baris (lalai): Item disusun secara mendatar (kiri ke kanan).
• lajur: Item disusun secara menegak (atas ke bawah).
• row-reverse: Item disusun secara mendatar tetapi dalam susunan terbalik.
• lajur-terbalik: Item disusun secara menegak tetapi dalam susunan terbalik.

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.

• Nilai:
  • flex-start: Menjajarkan item dengan permulaan bekas.
  • hujung lentur: Menjajarkan item ke hujung bekas.
  • tengah: Menjajarkan item di tengah.
  • space-between: Mengagihkan item dengan ruang yang sama di antara mereka.
  • ruang sekeliling: Mengedarkan item dengan ruang yang sama di sekelilingnya.

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.

• Nilai:
  • mula lentur: Menjajarkan item ke permulaan paksi silang.
  • hujung lentur: Menjajarkan item ke hujung paksi silang.
  • tengah: Menjajarkan item di tengah paksi silang.
  • regangan: Regangkan item untuk mengisi bekas (tingkah laku lalai).
  • garis dasar: Menjajarkan item sepanjang garis dasarnya.

Contoh:

.container {
  display: flex;
}

Memahami Paksi Utama dan Paksi Silang

• Paksi utama ialah paksi utama di mana Flexbox menyusun itemnya. Ia boleh mendatar (baris) atau menegak (lajur), bergantung pada nilai arah lentur.
• paksi silang berserenjang dengan paksi utama. Jika paksi utama adalah mendatar (baris), paksi silang adalah menegak. Jika paksi utama ialah menegak (lajur), paksi silang ialah mendatar.

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.

Contoh Flexbox: Reka Letak Mudah Yang Anda Boleh Buat

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.

Teknik Flexbox Lanjutan: Bekas Bersarang, Pesanan dan Flex-Wrap

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:

• Bekas Flex Bersarang: Gunakan Flexbox di dalam bekas Flex lain untuk lebih kawalan ke atas reka letak.
• Pesanan: Tukar susunan visual item tanpa mengubah struktur HTML.
• Flex-Wrap: Benarkan item dibalut pada baris baharu, berguna untuk reka letak responsif.

Teknik lanjutan ini memberikan anda lebih fleksibiliti dan kawalan apabila membina reka letak dengan Flexbox.

Kesilapan Biasa dengan Flexbox dan Cara Mengelakkannya

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

, yang boleh mengganggu penjajaran Flexbox.

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:

• justify-content: Penjajaran mendatar (paksi utama dalam baris).
• align-item: Penjajaran menegak (paksi silang dalam baris).

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!

Aplikasi Dunia Sebenar bagi 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.

• Contoh: Membina grid produk yang melaraskan daripada dua lajur pada mudah alih kepada empat lajur pada desktop dengan menggabungkan Flexbox dengan pertanyaan media.

.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.

Visual dan Kod

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:

• Paksi Utama: Arah di mana item fleksibel disusun.
• Paksi Silang: Arah serenjang dengan paksi utama.

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

1. Percubaan dengan Kod: Contoh langsung ialah sifat interaktif—ubah suai untuk melihat perubahan dalam masa nyata.
2. Gunakan Alat Visual: Tapak web seperti Flexbox Froggy menyediakan cara yang menyeronokkan untuk mengamalkan konsep Flexbox.
3. Tambahkan Syntax Highlighting: Platform seperti Dev.to dan editor Markdown secara automatik memformat kod anda untuk kebolehbacaan yang lebih baik.

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.

Kebolehcapaian

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.

Bagaimana Flexbox Meningkatkan Kebolehcapaian

1. HTML semantik dengan Flexbox
Flexbox berpasangan dengan baik dengan elemen HTML semantik seperti

,

,

dan

. Menggunakan elemen ini dalam kombinasi dengan Flexbox meningkatkan struktur kandungan anda untuk teknologi bantuan seperti pembaca skrin.

.container {
  display: flex;
  flex-direction: column;
}

2. Fleksibiliti untuk Navigasi Papan Kekunci
Flexbox memudahkan anda membuat reka letak mesra papan kekunci. Contohnya, ia memudahkan penyusunan butang dan pautan dengan cara yang memastikan susunan tab yang logik.

Petua: Uji navigasi dengan kekunci Tab untuk memastikan aliran lancar antara elemen boleh fokus.

3. Kandungan Boleh Disesuaikan untuk Pembaca Skrin
Flexbox membantu mengekalkan susunan kandungan logik dalam kod sumber HTML sambil menyusun semula elemen secara visual. Ini memastikan pembaca skrin boleh mentafsir kandungan dalam susunan yang dimaksudkan.

Elakkan: Menggunakan sifat pesanan secara berlebihan, kerana ia boleh mengelirukan pengguna yang bergantung pada peranti bantuan.

Amalan Terbaik untuk Reka Letak Flexbox Boleh Dicapai

1. Kekalkan Susunan HTML Logik
Sentiasa susun HTML anda dalam susunan bacaan yang logik. Gunakan Flexbox untuk pelarasan visual dan bukannya menukar aliran semula jadi kandungan.

2. Gunakan Mercu Tanda ARIA Apabila Perlu
Tambahkan peranan ARIA (cth., role="navigation") untuk menjelaskan tujuan elemen untuk pembaca skrin.

3. Uji dengan Teknologi Bantuan
Gunakan alatan seperti pembaca skrin (cth., NVDA, VoiceOver) dan penyemak kebolehaksesan (cth., Rumah Api atau Axe) untuk mengesahkan reka letak Flexbox anda.

Sediakan Kontras dan Penunjuk Fokus yang Mencukupi
Flexbox sering memberi kesan kepada reka letak butang dan pautan. Pastikan ia mempunyai kontras yang mencukupi dan jelas terfokus apabila dilayari dengan papan kekunci.

.container {
  display: flex;
}

Nota:
Flexbox boleh menyumbang kepada reka bentuk yang boleh diakses apabila digabungkan dengan HTML semantik dan amalan terbaik. Dengan menguji reka letak anda menggunakan alat bantu dan mengekalkan susunan kandungan logik, anda boleh membuat tapak web yang fleksibel dan inklusif.

Belajar Flexbox

Flexbox paling baik dipelajari melalui latihan praktikal! Memandangkan anda telah meneroka asas, contoh dan juga teknik lanjutan, tiba masanya untuk menggunakan pengetahuan anda.

Idea Amalan

1. Bina Reka Letak daripada Gores
Cabar diri anda untuk mereka bentuk reka letak halaman web yang ringkas menggunakan Flexbox. Contohnya, buat bar navigasi responsif, galeri foto atau reka letak kad berpusat.

2. Ubah suai Contoh Blog
Eksperimen dengan coretan kod yang disediakan dalam blog ini. Laraskan sifat seperti justify-content, align-item atau flex-direction untuk melihat cara ia menukar reka letak.

3. Main Permainan Flexbox
Gunakan alatan interaktif seperti Flexbox Froggy untuk mengasah kemahiran anda dengan cara yang menyeronokkan dan menarik.

Gunakan Pengetahuan Anda
Ambil apa yang telah anda pelajari dan mula membina! Sama ada projek peribadi kecil atau tweak reka letak dalam tapak web sedia ada, mengamalkan Flexbox akan mengukuhkan kemahiran anda.

Sertai Perbualan
Jangan ragu untuk berkongsi projek anda, bertanya soalan atau letakkan petua Flexbox kegemaran anda dalam ulasan. Mari berkembang dan belajar bersama-sama!