Mengapakah `justify-content: center` Tidak Memusatkan Teks Apabila Ia Membungkus dalam Bekas Flex?

Teks Tidak Berpusat dengan justify-content: center

Isu ini timbul apabila kandungan dalam bekas fleksibel menjadi terlalu panjang, mengakibatkan pembalut . Walaupun kandungan dipusatkan secara mendatar dengan justify-content: center, penjajaran terganggu semasa pembalut.

Memahami Tiga Tahap dalam Flexbox

Struktur bekas fleksibel terdiri daripada tiga peringkat:

• Bekas
• Item
• Kandungan

Setiap tahap mewakili elemen bebas.

Justifikasi dalam Bekas Flex

kandungan justify mengawal penjajaran item fleksibel dalam bekas, tetapi ia tidak mempengaruhi secara langsung anak item tersebut (dalam kes ini, teks).

Apabila lebar bekas flex melebihi lebar kandungan, item flex mengecut agar sesuai dengan kandungan (mengecut-untuk-muat) dan dipusatkan secara mendatar. Kandungan dalam item secara automatik mengikuti penjajaran ini.

Penjajaran Apabila Kandungan Melebihi Bekas Flex

Walau bagaimanapun, apabila kandungan menjadi lebih lebar daripada bekas flex, item flex boleh tidak lagi sejajar. Memandangkan item itu menduduki keseluruhan lebar bekas, ruang kosong yang tidak mencukupi untuk penjajaran.

Penjajaran Teks

Walaupun terdapat penjajaran, penjajaran teks: tengah tidak pernah digunakan pada teks secara lalai. Untuk memusatkannya secara langsung, penjajaran teks: tengah mesti ditambahkan secara eksplisit pada sama ada item fleksibel atau bekas fleksibel.

Contoh Kod

<code class="css">article {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

<code class="html"><article>
  <p>some long text here</p>
</article>

<article>
  <p class="center">some long text here</p>
</article></code>

Atas ialah kandungan terperinci Mengapakah `justify-content: center` Tidak Memusatkan Teks Apabila Ia Membungkus dalam Bekas Flex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!