Bagaimanakah Saya Boleh Menghalang Item Fleksibel daripada Memaparkan Bersebelahan Daripada Menyusun Secara Menegak?

Menghalang Item Flex daripada Dipamerkan Bersebelahan

Apabila menggunakan flexbox, kita sering menghadapi situasi di mana kita ingin memusatkan item dalam blok, tetapi dengan setiap item menduduki barisnya sendiri. Malangnya, flexbox kadangkala mengalihkan item apabila kita mahu ia diletakkan di bawah satu sama lain.

Pertimbangkan struktur HTML berikut, di mana segi empat sama jingga dan elemen teks diletakkan di dalam bekas menggunakan flexbox dengan justify-content: tengah dan align-item: center:

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

Dan CSS yang berkaitan:

.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;
}

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

Setelah memohon flexbox, segi empat sama jingga, bukannya diletakkan di atas teks, berakhir ke tepi. Untuk membetulkannya, kita perlu mengubah suai sifat arah lentur bekas dalam:

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

Menetapkan arah lentur: lajur mengarahkan kotak lentur untuk memaparkan anak-anaknya secara menegak, satu di bawah yang lain, bukannya dalam satu baris . Tingkah laku ini sejajar dengan keperluan kami, meletakkan segi empat sama jingga di atas teks.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Item Fleksibel daripada Memaparkan Bersebelahan Daripada Menyusun Secara Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!