Bagaimana untuk Menjajarkan Teks Dalam Item Flexbox Apabila Kandungan Melebihi Lebar Item?

Penjajaran Teks dengan Flexbox: Memahami Justify-Content dan Text-Align

Dalam flexbox, sifat justify-content menjajarkan item flex sepanjang paksi utama, manakala penjajaran teks menjajarkan kandungan teks dalam item fleksibel tersebut. Apabila kandungan dalam item fleksibel melebihi lebarnya, ketidakpadanan dalam penjajaran boleh berlaku.

Gelagat Penjajaran Teks Lalai

Secara lalai, teks dijajar kiri (atau dijajar kanan dalam bahasa kanan ke kiri). Apabila anda menggunakan justify-content: tengah pada bekas flexbox, item flex dipusatkan secara mendatar dalam bekas. Walau bagaimanapun, penjajaran ini hanya terpakai pada item fleksibel itu sendiri, bukan kandungannya.

Apabila Lebar Kandungan Melebihi Lebar Item

Apabila kandungan teks lebih lebar daripada item fleksibel , item tidak boleh diselaraskan lagi (cth., berpusat atau wajar) kerana ia menggunakan lebar penuh yang tersedia. Akibatnya, teks mengekalkan gaya lalai dijajar kirinya.

Membetulkan Penjajaran dengan Penjajaran Teks

Untuk memusatkan teks dalam item fleksibel, anda perlu tetapkan penjajaran teks secara eksplisit: tengah pada sama ada item flex atau bekas induknya. Ini mengatasi gelagat lalai dijajar kiri dan menjajarkan kandungan teks mengikut cara yang diingini.

Contoh:

<code class="css">.flex-container {
  display: flex;
  justify-content: center;
}

.flex-item {
  text-align: center;
}</code>

Dalam contoh ini, kelas item fleksibel termasuk penjajaran teks: tengah, yang memastikan kandungan teks dipusatkan dalam setiap item fleksibel, tanpa mengira lebar item.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Teks Dalam Item Flexbox Apabila Kandungan Melebihi Lebar Item?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!