Bagaimana Saya Boleh Menjajarkan Item Flex Secara Menegak?

Sejajarkan Item Fleksibel Secara Menegak

Flexbox menawarkan cara yang mudah untuk menyusun elemen dalam bekas. Walau bagaimanapun, kadangkala anda mungkin menghadapi masalah apabila item dipaparkan sebelah menyebelah dan bukannya dalam susunan menegak yang diingini. Ini boleh berlaku apabila menggunakan paparan: flex.

Untuk menghalang item flex daripada dipaparkan sebelah menyebelah, cuma tambah gaya berikut pada elemen induk:

flex-direction: column;

Arahan ini mengarahkan kotak fleksibel untuk memaparkan anak-anaknya dalam lajur dan bukannya baris.

Contoh:

Dalam coretan kod yang disediakan:

<div class="container">
  <div class="inner">
    <div class="square"></div>

    <p>some text</p>
  </div>
</div>

Pada mulanya, elemen "segi empat sama" dan "beberapa teks" akan diletakkan bersebelahan. Untuk membetulkannya, tambahkan CSS berikut:

.inner {
  flex-direction: column;
}

Ini akan memastikan bahawa "segi empat sama" diletakkan di atas elemen "sesetengah teks", mencapai reka letak menegak yang diingini.

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