Atoz CSS Tip Pantas: Membenarkan teks dan menggunakan Flexbox

Artikel ini adalah sebahagian daripada siri Atoz CSS. Anda boleh mencari entri lain untuk siri ini di sini. Lihat rakaman skrin penuh dan arahan mengenai penjajaran teks di sini.

Selamat datang ke siri Atoz CSS kami! Dalam siri ini, saya akan meneroka nilai CSS yang berbeza (dan sifat) yang bermula dengan huruf yang berbeza dalam abjad. Kami tahu bahawa kadang -kadang rakaman skrin tidak mencukupi, jadi dalam artikel ini saya telah menambah tip/kursus baru pada penjajaran teks.

j bermaksud penjajaran teks

Tidak ada lagi yang dikatakan mengenai penjajaran teks, jadi dalam artikel ini kita akan mengambil jalan memutar ke dalam dunia Flexbox dan melihat cara menyelaraskan kandungan. Dalam rakaman skrin J Surat, kami membincangkan harta

dan cara menggunakannya untuk menyelaraskan teks pada halaman. Tidak ada lagi yang boleh dikatakan mengenai perkara ini, jadi mari kita menyelam beberapa Flexbox! Flexbox mempunyai harta yang membolehkan anda mencari unsur -unsur dalam bekas elastik. Setiap nilai harta ini mentakrifkan bagaimana penyemak imbas memperuntukkan ruang antara dan sekitar item elastik di sepanjang paksi utama bekas induknya.

Terdapat lima nilai yang berbeza: text-align justify-content justify-content

(lalai): Item diletakkan pada permulaan elemen yang mengandungi

• flex-start: Item berada di hujung elemen yang mengandungi
• flex-end: Item berpusat di dalam elemen yang terkandung
• center: Item tersebut diedarkan secara merata sepanjang lebar elemen yang mengandungi, elemen anak pertama pada mulanya dan elemen anak terakhir pada akhir
• space-between: Projek ini diedarkan sama rata, dengan jarak yang sama di sekitar projek, serta permulaan dan akhir. Semak contoh ini untuk mengetahui tentang hasil yang berbeza apabila menukar nilai harta
.
• Lihat CODEPEN Contoh space-around justify-content soalan yang sering ditanya mengenai penjajaran teks CSS (FAQ)

Apakah perbezaan antara

dan dalam ?

Dalam CSS, harta justify-content: space-between digunakan untuk menyelaraskan item di sepanjang garis mendatar dalam bekas elastik. Nilai -nilai space-around dan

harta ini berkelakuan berbeza. Apabila anda menggunakan

, penyemak imbas mengedarkan ruang secara merata antara item elastik, tetapi tidak di sekelilingnya. Ini bermakna item pertama akan berada di permulaan baris dan item terakhir akan berada di hujung baris. Sebaliknya, apabila anda menggunakan justify-content, penyemak imbas sama rata mengedarkan ruang di sekitar projek elastik. Ini bermakna akan ada ruang di kedua -dua belah projek pertama dan terakhir, iaitu separuh saiz ruang antara projek. space-between

CSS Bagaimana berfungsi? justify-content: space-evenly Nilai

atribut

dalam justify-content dalam space-evenly CSS digunakan untuk mengedarkan ruang sama rata antara dan sekitar item elastik. Ini bermakna ruang antara mana -mana dua projek dan ruang di lokasi yang melampau akan sama. Ini adalah pilihan yang hebat apabila anda ingin mengekalkan jarak yang sama sepanjang proses, tanpa mengira bilangan atau saiz item.

Bolehkah saya menggunakan justify-content dengan susun atur grid dalam CSS?

Ya, anda boleh menggunakan atribut justify-content dengan susun atur grid CSS. Ia berfungsi sama seperti dalam Flexbox, menjajarkan item grid di sepanjang paksi baris. Walau bagaimanapun, ia hanya berkesan jika terdapat ruang tambahan dalam bekas grid (iaitu, apabila jumlah saiz item grid lebih kecil daripada saiz bekas grid).

Apakah nilai lalai

dalam justify-content dalam CSS?

Nilai lalai atribut

dalam justify-content dalam flex-start adalah justify-content. Ini bermakna jika anda tidak menentukan nilai untuk

, penyemak imbas akan menyelaraskan item elastik ke permulaan bekas elastik.

justify-content di CSS

bagaimana untuk bekerja dengan bahasa kanan-ke-kiri?

justify-content atribut justify-content: flex-end dalam CSS berfungsi dengan bahasa kanan-ke-kiri (RTL) seperti bahasa Arab atau Ibrani dengan membalikkan arah. Sebagai contoh, jika anda menggunakan

, item akan diselaraskan pada permulaan bekas dalam bahasa RTL, iaitu ke kanan.

justify-content Bolehkah saya menggunakan peratusan dengan

dalam CSS?

justify-content Tidak, anda tidak boleh menggunakan peratusan dengan atribut flex-start dalam CSS. Ia hanya menerima kata kunci tertentu seperti flex-end, center, space-between, space-around, space-evenly,

,

dan justify-content. wrap

di CSS

bagaimana untuk bekerja dengan wrap? flex-wrap justify-content Apabila anda menggunakan atribut

dengan nilai

dalam bekas elastik, item elastik boleh membungkus ke beberapa baris. Dalam kes ini, atribut justify-content menjajarkan item pada setiap baris secara berasingan.

Bolehkah saya menggunakan justify-content: center dalam CSS untuk memusatkan item secara menegak dan mendatar? align-items: center

Ya, anda boleh menggunakan CSS untuk memusatkan item secara menegak dan mendatar. Untuk pusat mendatar, anda boleh menggunakan dan untuk pusat menegak anda boleh menggunakan . Walau bagaimanapun, sifat -sifat ini hanya sah dalam bekas elastik. Apakah perbezaan antara

dan align-items dalam justify-content?

Dalam CSS, kedua -dua align-items dan justify-content digunakan untuk menyelaraskan item dalam bekas elastik, tetapi mereka bekerja di sepanjang paksi yang berbeza. Harta justify-content menjajarkan item di sepanjang paksi mendatar (atau spindle), manakala harta align-items menjajarkan item di sepanjang paksi menegak (atau paksi silang).

Bolehkah saya menggunakan justify-content dengan inline-flex dalam CSS?

Ya, anda boleh menggunakan atribut justify-content dengan inline-flex dalam CSS. Ia berfungsi dengan cara yang sama seperti flex, menyelaraskan item elastik di sepanjang gelendong bekas elastik inline.

Perhatikan bahawa saya menulis semula beberapa kenyataan berdasarkan konteks dan menyusun semula perenggan untuk menjadikan artikel itu lebih lancar dan lebih semula jadi dan mengelakkan pertindihan. Di samping itu, kerana saya tidak dapat mengakses kandungan sebenar gambar, saya hanya dapat mengekalkan format asal dan lokasi gambar, tetapi tidak dapat menjamin ketepatan penerangan gambar. Jika anda memerlukan pseudo-asal yang lebih tepat, sila berikan kandungan tertentu gambar.

Atas ialah kandungan terperinci Atoz CSS Tip Pantas: Membenarkan teks dan menggunakan Flexbox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!