Memahami CSS Flexbox: Panduan Pemula!!!

?JADUAL KANDUNGAN

1. Pengenalan kepada CSS Flexbox
2. Hartanah Penting
3. Hartanah Lanjutan
4. Kesimpulan

---

?️ Pengenalan kepada CSS Flexbox

CSS Flexbox ialah penyelesaian muktamad untuk semua masalah reka letak anda. Dalam artikel ini, kami memberi tumpuan sepenuhnya kepada penguasaan Flexbox, meneroka sifatnya dan cara anda boleh menggunakannya untuk mencipta reka bentuk responsif yang menakjubkan dengan mudah. Mari selami dan jadikan reka letak itu lancar.

Reka Letak Kotak Fleksibel, atau Flexbox, ialah kaedah susun atur satu dimensi yang menyusun item di sepanjang paksi tunggal, sama ada satu baris atau lajur. Jika anda seorang pelajar visual seperti saya, itu mungkin tidak masuk akal, jadi izinkan saya melukis gambar untuk anda -

Bayangkan anda mempunyai sebuah kotak yang diisi dengan barang kegemaran anda, ia mungkin buku atau makanan ringan kegemaran anda, apa sahaja yang menggegarkan bot anda, tetapi ia berada dalam keadaan huru-hara. Flexbox adalah seperti penganjur ajaib dengan secubit OCD yang masuk untuk menyelamatkan hari ini. Ia menyusun segala-galanya dengan kemas dalam baris dan lajur yang sesuai dengan keperluan anda.

Sama ada anda mahu item anda dijarakkan sama rata, dikumpulkan ke satu bahagian atau dipusatkan dengan sempurna, Flexbox adalah pilihan anda. Sekarang setelah kita tahu Flexbox ialah penganjur dengan OCD, mari kita selami alat yang digunakannya untuk membuat keajaiban berlaku! Berikut adalah ciri-ciri pentingnya:

** Sifat Penting **

1. paparan: flex: Di sinilah semuanya bermula! Dengan menambahkan sifat ini pada bekas (Kotak yang diisi dengan snek kegemaran anda), semua snek anda (elemen kanak-kanak) akan disusun dengan kemas di sepanjang paksi tunggal secara lalai, itu adalah satu baris. Tetapi jangan risau, anda boleh bertukar kepada lajur jika anda mahu!"

Nota: Untuk berinteraksi dengan contoh CodePen, klik pada teks "Edit pada CodePen" di penjuru kanan sebelah atas ilustrasi. Ini membolehkan anda bermain-main dengan kod secara langsung!

Percubaan dengan nilai pada CodePen:

2. flex-direction: Ini menentukan arah mana snek anda akan berbaris. Ingat secara lalai, snek berbaris dalam satu baris, tetapi arah flex memberi anda kuasa untuk mengubahnya. Inilah nilainya:

a. baris(lalai): Makanan ringan anda berbaris dalam barisan yang kemas dari kiri ke kanan.

b. row-reverse: Item terbalik arah dan berbaris dari kanan ke kiri, sesuai untuk apabila anda berasa sedikit memberontak!

c. lajur: Item anda disusun secara menegak, sama seperti menara snek! Bayangkan setiap snek (atau item flex) diletakkan satu di atas yang lain, membentuk menara snek yang lazat.

d. lajur-terbalik: Tindanan bermula dari bawah dan terbina.

Berikut ialah ilustrasi, sila tukar nilai arah flex supaya anda dapat melihat cara ia berfungsi.

3. Justify-content: Ini ialah tongkat ajaib bekas flex dan ia menggunakannya untuk mengagihkan ruang antara makanan ringan. ia semacam memutuskan bagaimana makanan ringan disusun dalam kotak makanan ringan. Berikut adalah pilihan utamanya:

a. flex-start(lalai): Semua makanan ringan berkumpul pada permulaan baris atau lajur.

b. flex-end: Semua makanan ringan berkumpul di hujung baris atau lajur.

c. pusat: Makanan ringan berkumpul di tengah-tengah baris atau lajur.

d. ruang-antara: Snek pertama ditolak ke permulaan, snek terakhir ditolak ke penghujung, dan selebihnya dijarakkan sama rata di antara mereka.

e. ruang sekeliling: Makanan ringan mendapat ruang yang sama di sekelilingnya.

f. ruang-sekata: Makanan ringan menikmati ruang yang sama rata di sekeliling.

Berikut ialah ilustrasi, sila tukar nilai kandungan justify supaya anda dapat melihat cara ia berfungsi.

4. Jajar-item: Kami telah pun menyusun makanan ringan kami dalam satu baris atau lajur menggunakan arah flex, kini tiba masanya untuk memutuskan berapa tinggi atau rendah yang kami mahu makanan itu diletakkan dalam bekas snek. Berikut ialah nilai biasa:

a. flex-start: Menjajarkan item pada permulaan paksi silang.

b. hujung lentur: Menjajarkan item di hujung paksi silang.

c. tengah: Memusatkan item di sepanjang paksi silang.

d. regangan: Regangan item untuk mengisi bekas (lalai untuk item peringkat blok).

e. garis dasar: Menjajarkan item di sepanjang garis dasar teksnya.

Jom lihat Align-Items in Action.

Terokai Pen Kod di bawah untuk melihat keajaiban dalam tindakan! Sila tweak CSS untuk melihat cara ia mengubah penjajaran.

** Sifat Lanjutan **

1. Align-content: Sifat align-content menentukan cara berbilang baris item fleksibel (atau makanan ringan dalam analogi kami) dijarakkan sepanjang paksi silang dalam bekas fleksibel (bekas snek). Ia dimainkan hanya apabila terdapat berbilang baris atau lajur item fleksibel, bermakna bekas fleksibel anda mesti mempunyai kandungan yang dibalut (balut fleksibel: bungkus).

Nilai Jajarkan-kandungan

a. flex-start: Semua baris makanan ringan dikumpulkan di bahagian atas bekas snek meninggalkan bekas yang lain berasa agak kosong.

b. flex-end: Deretan makanan ringan dikumpulkan di bahagian bawah bekas makanan ringan, dengan itu meninggalkan ruang kosong di bahagian atas (sunyi di bahagian atas).

c. tengah: Deretan makanan ringan dikumpulkan di tengah, meninggalkan ruang kosong di bahagian atas dan bawah bekas makanan ringan kami.

d. ruang-antara: Barisan makanan ringan dijarakkan sama rata dengan baris pertama di bahagian atas dan baris terakhir di bahagian bawah.

e. ruang sekeliling: Baris dijarakkan dengan jurang yang sama antara baris.

f. ruang-sekata: Baris mempunyai ruang yang sama di antara mereka.

g. stretch(default): Makanan ringan kami semuanya "stretch" untuk mengisi ketinggian bekas snek.

Cukup dengan kata-kata, mari kita flex ke dalam tindakan (lihat apa yang saya lakukan di sana? Tiada siapa? Okay ?‍♀️).

Anda boleh menggantikan nilai kandungan penjajaran dengan mula lentur, hujung lentur, tengah, ruang antara, ruang sekeliling, ruang sekata atau regangan untuk melihat perubahan.

Lihat CodePen ini untuk mendapatkan ilustrasi interaktif!

? Jajar-item lwn. Jajarkan-kandungan: Apakah Perbezaannya?
Walaupun bunyinya serupa, align-item dan align-content adalah tidak sama. Mari jelaskan perbezaannya:

item sejajar menjajarkan item lentur individu di sepanjang paksi silang. Anggap ia sebagai menetapkan penjajaran untuk item itu sendiri dalam satu baris/lajur.

selaras-kandungan menjajarkan berbilang baris item (apabila pembalut aktif, iaitu balut lentur: balut) di sepanjang paksi silang bekas fleksibel.

? Ambilan Utama:
align-items memperkatakan semua item dalam satu bekas fleksibel, manakala align-content mengendalikan berbilang baris item (hanya apabila terdapat berbilang baris yang dibalut).

** Ingat**:

Property	Focus Area	When to use
Align-items	Align individual items	When you are adjusting the vertical alignment of single items
Align-content	Align rows of items	When flex-wrap: wrap is used (and there are multiple rows)

2. Flex-wrap: Hartanah ini menentukan sama ada item flex anda (aka makanan ringan kegemaran anda) harus dimasukkan ke dalam satu baris/lajur atau dibalut dengan sopan pada berbilang baris/lajur apabila ia kehabisan ruang.

Berikut ialah nilainya:

a. nowrap(default): Makanan ringan anda memutuskan bahawa mereka tidak mahu ruang bernafas dan hanya kekal sempit dalam satu baris/lajur.

b. bungkus: Sekarang, mereka mahukan ruang bernafas, jadi mereka tumpahkan ke baris atau lajur seterusnya apabila tiada lagi ruang di baris/lajur pertama.

c .wrap-reverse: Hampir sama seperti wrap tetapi mereka melakukannya secara terbalik. Bawah-ke-atas atau kanan-ke-kiri, bergantung pada arah flex.

Inilah CodePen yang menunjukkan gelagat sifat flex-wrap. Anda boleh bereksperimen dengan nilai yang berbeza (nowrap, wrap dan wrap-reverse) untuk melihat cara bekas fleksibel mengendalikan limpahan makanan ringan.

3. Flex: Ini ialah sifat penentu yang menetapkan cara item flex(snek kami) akan membesar atau mengecut agar sesuai dengan ruang yang ada di dalam bekas fleksibelnya. Ia adalah singkatan untuk 3 sub-sifat:

a. flex-grow: Menentukan berapa banyak flex-item akan berkembang.

b. flex-shrink: Tentukan berapa banyak item-flex akan mengecut apabila ruang sempit.

c. flex-basis: Menentukan saiz permulaan sebelum item mula membesar atau mengecut.

Berikut ialah CodePen yang menunjukkan sifat flex dan komponennya

Jangan ragu untuk membuka dan berinteraksi dengannya untuk melihat cara melaraskan nilai flex mengubah reka letak item.

4. Align-self: Sifat ini mengatasi nilai item penjajaran bekas fleksibel. ia pada asasnya menjajarkan item pada paksi silang. Berikut ialah nilainya:

a. auto (lalai): Mewarisi penjajaran daripada sifat item penjajaran bekas.

b. mula lentur: Menjajarkan item pada permulaan paksi silang.

c. hujung lentur: Menjajarkan item di hujung paksi silang.

d. tengah: Memusatkan item di sepanjang paksi silang.

e. regangan: Regangkan item untuk mengisi paksi silang (jika tidak bersaiz tetap).

f. garis dasar: Menjajarkan item di sepanjang garis dasar teksnya.

Lihat CodePen ini untuk mendapatkan ilustrasi interaktif!

? Kesimpulan
CSS Flexbox memudahkan cara kami mendekati reka letak. Dengan beberapa sifat utama seperti paparan: flex, flex-direction, justify-content dan align-item, anda boleh membuat reka bentuk yang responsif dan dijajar dengan cantik dengan mudah.

? Ingin menyelam lebih dalam? Berikut ialah beberapa sumber yang hebat:

1. Css-Tricks: Panduan Lengkap untuk Flexbox

Panduan terperinci yang merangkumi setiap sifat dan kes penggunaan Flexbox.

1. Dokumen Web MDN - CSS Flexbox

Dokumentasi rasmi dengan penjelasan, contoh dan keserasian penyemak imbas.

Kunci untuk menguasai apa-apa pun ialah amalan yang konsisten, jadi pastikan anda berlatih seberapa banyak yang anda boleh untuk mengukuhkan pemahaman anda. Semakin anda bermain dengan alatan ini, semakin yakin anda akan keupayaan anda untuk mencipta reka letak yang cantik.

Sehingga lain kali, penulis kejiranan anda yang mesra (ya, masuk akal dalam kepala saya). ? Selamat tinggal!!!

Atas ialah kandungan terperinci Memahami CSS Flexbox: Panduan Pemula!!!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!