Bagaimana untuk Menghentikan Item Fleksibel daripada Meregangkan Melebihi Kandungannya?

Mencegah Item Flex daripada Regangan

Flexbox menawarkan sistem susun atur intuitif, tetapi kadangkala ia boleh menyebabkan tingkah laku yang tidak diingini, seperti regangan item flex di luar kandungan mereka. Untuk menangani isu ini, mari kita mendalami prinsip asas dan terokai penyelesaian optimum.

Memahami Isu

Dalam contoh anda, elemen span meregangkan untuk menduduki keseluruhan ketinggian bekas fleksibel, walaupun ia hanya mengandungi sejumlah kecil teks. Ini berlaku kerana secara lalai, item flex mempunyai keupayaan untuk meregang dan mengecut dalam ruang yang tersedia.

Penyelesaian

Untuk mengelakkan rentang daripada regangan tanpa menjejaskan item flex lain , anda boleh menggunakan sifat align-item pada bekas flex. Dengan menetapkannya kepada flex-start, anda mengarahkan semua item flex dalam bekas itu untuk menjajarkannya di sepanjang tepi atas. Akibatnya, mereka hanya akan menduduki ketinggian yang diperlukan oleh kandungan mereka.

Berikut ialah kod yang dikemas kini:

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

span {
  background: red;
}

Pertimbangan Tambahan

Penyelesaian ini digunakan untuk semua item flex dalam bekas. Jika anda perlu menghalang regangan hanya untuk item tertentu, anda boleh menggunakan sifat flex dengan nilai flex-shrink. Dengan menetapkan nilai ini kepada 0, anda boleh melumpuhkan keupayaan pengecutan untuk item fleksibel tertentu itu.

Atas ialah kandungan terperinci Bagaimana untuk Menghentikan Item Fleksibel daripada Meregangkan Melebihi Kandungannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!