Bagaimana untuk Menghentikan Item Flex daripada Memaparkan Bersebelahan?

Menghalang Item Flex daripada Dipamerkan Bersebelahan

Masalah:

Apabila menggunakan flexbox ke elemen tengah dalam blok, adalah perkara biasa untuk menghadapi isu di mana item kelihatan bersebelahan dan bukannya menegak di bawah satu sama lain. Ini boleh menjadi tidak diingini dalam situasi tertentu.

Penyelesaian:

Untuk mengelakkan item fleksibel daripada dipaparkan sebelah menyebelah, laksanakan gaya CSS berikut:

.inner {
  flex-direction: column;
}

Penjelasan:

Sifat gaya ini menentukan arah di mana item flex disusun dalam elemen bekas. Dengan menetapkan arah-flex kepada lajur, anda mengarahkan kotak fleksibel untuk memaparkan anak-anaknya dalam baris dan bukannya lajur. Ini menjajarkan item secara menegak di bawah satu sama lain, seperti yang dikehendaki.

Contoh Kemas Kini:

Coretan kod dikemas kini berikut menunjukkan cara penyelesaian ini berfungsi:

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

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}

Dengan menggunakan arah lentur: lajur, segi empat sama jingga dan teks kini disusun dengan betul secara menegak dalam elemen bekas, seperti yang dimaksudkan.

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