Bagaimana untuk Menghentikan Item Flex daripada Regangan dalam Flexbox?

Mencegah Item Flex daripada Regangan

Apabila menggunakan susun atur Flexbox, item flex mungkin meregang dan mengisi ruang yang tersedia dalam bekasnya . Walau bagaimanapun, terdapat situasi di mana anda mungkin ingin menghalang perkara ini daripada berlaku.

Mengapa Item Flex Boleh Meregangkan?

Secara lalai, item flex akan meregang sepanjang paksi utama bekas mereka, yang biasanya sama ada mendatar (baris) atau menegak (lajur). Ini kerana sifat flex ditetapkan kepada 1 secara lalai, yang menunjukkan bahawa item harus fleksibel dan berkembang untuk memenuhi mana-mana ruang yang tersedia.

Mencegah Regangan Item Flex

Untuk mengelakkan item flex daripada regangan, anda boleh mengatasi nilai flex lalai dengan menetapkannya kepada 0. Ini akan menyebabkan item mengecut agar sesuai dengan kandungannya, menghalang ia daripada mengambil lebih banyak ruang daripada yang diperlukan.

Contoh

Pertimbangkan contoh berikut:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

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

Dalam contoh ini, item lentur (span) diregangkan untuk mengisi ketinggian penuh bekasnya. Untuk mengelakkan ini, tambahkan gaya berikut pada elemen div:

align-items: flex-start;

Ini menjajarkan item lentur di sepanjang permulaan bekasnya, menghalangnya daripada regangan untuk memenuhi ketinggian penuh.

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