Bagaimana untuk Menghalang Barangan Flexbox daripada Meregangkan untuk Mengisi Ruang Sedia?-tutorial css-php.cn

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

Susan Sarandon

Lepaskan： 2024-11-29 15:28:10

asal

670 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Bagaimana Mengekalkan Tepi Tajam Apabila Mengaburkan Imej dengan Penapis CSS3? Artikel seterusnya：Mengapa Lajur Blok Sebaris Lebar 50% Saya Membungkus ke Baris Seterusnya?

Kenyataan Laman Web ini

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 terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2041

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2200

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1855

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...