Bagaimana untuk Mencegah Barangan Flex daripada Regangan dalam Ketinggian?

Menguatkuasakan Kebebasan Saiz untuk Item Fleksibel

Dalam susun atur flex, adalah perkara biasa untuk menghadapi senario di mana item flex tertentu tidak seharusnya meregang untuk mengisi bekas ketinggian. Tingkah laku ini, yang dikenali sebagai "regangan," boleh mengganggu niat reka bentuk. Mari kita terokai sebab di sebalik isu ini dan kenal pasti penyelesaian yang sesuai untuk mencegahnya.

Mengapa Item Meregangkan dalam Tinggi?

Secara lalai, item flex mewarisi ketinggiannya daripada sifat ketinggian kontena. Apabila bekas diberi ketinggian, item fleksibelnya akan melaraskan saiznya dengan sewajarnya.

Mencegah Regangan

Untuk mengelakkan item daripada regangan ketinggian, anda boleh menyasarkannya khususnya dalam bekas fleksibel. Satu pendekatan yang berkesan ialah mengubah suai sifat align-item bagi bekas:

Langkah 1: Jajarkan Item ke Permulaan

Tetapkan bekas itu selaraskan-item harta untuk flex-mula. Ini memastikan item lenturkan sejajar dengan tepi atas bekas. Akibatnya, item tidak akan melampaui ketinggian asalnya, mengekalkan saiz asalnya.

Kod Contoh:

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

Dengan menggunakan langkah ini, anda boleh menghalang item lentur daripada regangan ketinggian dengan berkesan tanpa menjejaskan saiz atau penjajaran item lain dalam bekas fleksibel. Melaksanakan teknik ini membolehkan anda mengekalkan kawalan ke atas reka letak dan persembahan yang tepat bagi elemen web anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Barangan Flex daripada Regangan dalam Ketinggian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!