Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menghalang Barangan Flexbox daripada Meregangkan untuk Mengisi Ruang Sedia?

Bagaimana untuk Menghalang Barangan Flexbox daripada Meregangkan untuk Mengisi Ruang Sedia?

Susan Sarandonasal: 2024-11-29 15:28:10667semak imbas

How to Prevent Flexbox Items from Stretching to Fill Available Space?

Regangan Item Flexbox: Penyelesaian dan Pertimbangan

Dalam susun atur flexbox, item flex mungkin meregang untuk mengisi ruang yang ada, walaupun kandungannya sendiri banyak. lebih kecil. Ini boleh menjadi isu dalam situasi tertentu.

Punca Regangan Item

Dalam contoh yang disediakan, elemen meregang ke ketinggian bekas fleksibelnya,

, kerana CSS berikut:

div {
  display: flex;
  height: 200px;
}

Ini menetapkan

sebagai bekas fleksibel dan menetapkan ketinggiannya kepada 200px. Sejak elemen adalah satu-satunya item fleksibel, ia secara automatik diregangkan untuk mengisi keseluruhan ruang yang ada.

Mencegah Regangan Item

Terdapat dua cara utama untuk menghalang item fleksibel daripada regangan:

Tetapkan sifat align-item: Menetapkan align-item kepada flex-start akan diselaraskan semua item fleksibel ke bahagian atas bekas, tanpa mengira saiz kandungannya. Ini memastikan tiada item akan meregang secara menegak.

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

Gunakan sifat flex: Sifat flex boleh digunakan untuk mengawal fleksibiliti item flex individu. Secara lalai, semua item flex mempunyai nilai flex 1, yang bermaksud ia akan meregangkan untuk mengisi mana-mana ruang yang tersedia. Untuk mengelakkan item daripada regangan, tetapkan nilai flexnya kepada nombor yang lebih rendah, seperti 0.

span {
  flex: 0;
}

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Barangan Flexbox daripada Meregangkan untuk Mengisi Ruang Sedia?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css for Property number default this flex issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana Mengekalkan Tepi Tajam Apabila Mengaburkan Imej dengan Penapis CSS3?Artikel seterusnya：Bagaimana Mengekalkan Tepi Tajam Apabila Mengaburkan Imej dengan Penapis CSS3?

Artikel berkaitan

Lihat lagi