Bagaimanakah Saya Boleh Menjajarkan Item Flex Secara Menegak Daripada Secara Mendatar?

Memastikan Item Fleksibel Menjajarkan Menegak

Apabila menggunakan flexbox ke elemen tengah, kadangkala mengecewakan apabila item disusun secara mendatar dan bukannya menegak. Isu ini timbul apabila item fleksibel mempunyai aliran sebaris semula jadi, seperti teks atau imej.

Masalah:

Pertimbangkan coretan kod berikut:

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="inner">
  <div class="square"></div>
  <p>some text</p>
</div>

Niatnya adalah untuk memusatkan kedua-dua segi empat sama jingga dan teks dalam bekas .dalam. Walau bagaimanapun, output akan menunjukkan segi empat sama dan teks bersebelahan, dengan teks dipotong separuh ke bawah.

Penyelesaian:

Untuk membetulkan tingkah laku ini, kita perlu untuk mengubah arah lentur bekas .dalam. Secara lalai, flexbox memaparkan anak-anaknya secara mendatar. Untuk menjadikannya tindanan secara menegak, kami menetapkan sifat flex-direction kepada lajur.

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

Coretan kod yang dikemas kini ini akan memaksa item flex dijajarkan secara menegak, menyelesaikan isu tindanan sebelah menyebelah.

Output Kemas Kini:

Petak jingga kini akan muncul di atas teks, seperti yang dimaksudkan pada asalnya. Ini ialah teknik yang berguna apabila anda ingin memastikan elemen tertentu kekal sejajar dengan cara tertentu dalam bekas fleksibel.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Item Flex Secara Menegak Daripada Secara Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!