Bagaimana untuk Menghalang Item Flex daripada Memaparkan Bersebelahan?

Halang Item Flex daripada Dipaparkan Bersebelahan

Flexbox menawarkan cara yang berkesan untuk menjajarkan item dalam blok. Walau bagaimanapun, jika anda menghadapi senario di mana anda mahu item dipaparkan secara menegak dan bukannya mendatar, tingkah laku flex lalai boleh menjadi penghalang.

Pernyataan Masalah:

Walaupun menggunakan flexbox untuk memusatkan item dalam satu blok, item tersebut terus muncul bersebelahan. Hasil yang diinginkan adalah untuk setiap item menduduki barisnya sendiri. Segi empat sama jingga, misalnya, hendaklah berada di atas teks, tetapi flex telah meletakkannya semula di sebelah teks.

Penyelesaian:

Kunci untuk menyelesaikan isu ini terletak dalam menambah gaya berikut:

.inner {
  flex-direction: column;
}

Dengan menentukan "lajur" sebagai arah flex, kami mengarahkan flexbox untuk memaparkan anak-anaknya secara menegak. Ini menyelesaikan masalah dan meletakkan item seperti yang dimaksudkan.

Snippet Kemas Kini:

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

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

<style>
  .container {
    ...
  }

  .inner {
    ...
    flex-direction: column;
  }

  .square {
    ...
  }
</style>

Dengan sifat "arah flex" ditetapkan kepada "lajur," elemen flexbox kini akan dipaparkan dalam baris, menyelesaikan isu asal kedudukan sebelah menyebelah.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Item Flex daripada Memaparkan Bersebelahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!