Saya mempunyai 4 lajur flexbox dan semuanya berfungsi dengan baik, tetapi apabila saya menambah beberapa teks pada satu lajur dan menetapkannya kepada saiz fon yang besar, ia menjadikan lajur lebih lebar daripada yang sepatutnya disebabkan oleh sifat flex.
Saya cuba menggunakan word-break: break-word dan ia membantu, tetapi apabila saya mengubah saiz lajur kepada lebar yang sangat kecil, huruf dalam teks dipecahkan kepada beberapa baris (satu huruf setiap baris), tetapi lebar lajur tidak akan lebih kecil daripada saiz huruf.
Tonton video ini (Pada mulanya, lajur pertama adalah yang paling kecil, tetapi apabila saya mengubah saiz tetingkap, ia menjadi lajur terluas. Saya hanya mahu sentiasa menghormati tetapan fleksibel; saiz fleksibel ialah 1:3: 4 :4)
Saya tahu bahawa menetapkan saiz fon dan padding lajur kepada nilai yang lebih kecil akan membantu... tetapi adakah terdapat sebarang penyelesaian lain?
Saya tidak boleh menggunakan overflow-x: hidden.
JSFiddle
.container { paparan: flex; lebar: 100% } .col { ketinggian min: 200px; padding: 30px; putus-kata: putus-kata } .col1 { lentur: 1; latar belakang: oren; saiz fon: 80px } .col2 { lentur: 3; latar belakang: kuning } .col3 { lentur: 4; latar belakang: biru langit } .col4 { lentur: 4; latar belakang: merah } Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya mendapati ini telah menyebabkan saya mengalami masalah berkali-kali sejak beberapa tahun lalu untuk kedua-dua flex dan grid, jadi saya mencadangkan perkara berikut:
* { min-width: 0; min-height: 0; }Jika anda memerlukan tingkah laku ini, gunakan sahaja
min-width: auto或min-height: auto.Malah, anda juga boleh menambah saiz kotak untuk menjadikan semua susun atur lebih munasabah:
* { box-sizing: border-box; min-width: 0; min-height: 0; }Adakah sesiapa tahu jika terdapat sebarang akibat yang pelik? Dalam beberapa tahun menggunakan kaedah di atas, saya tidak mengalami sebarang masalah. Malah, saya tidak dapat memikirkan sebarang situasi di mana saya ingin susun atur daripada kandungan ke luar ke dalam flex/grid, dan bukannya dari flex/grid ke dalam ke kandungan --- dan jika situasi sedemikian wujud, ia sudah tentu jarang berlaku. Jadi ini terasa seperti lalai yang teruk. Tetapi mungkin saya kehilangan sesuatu?
Saiz minimum automatik untuk projek Flex
Anda menghadapi tetapan lalai flexbox.
Item fleksibel tidak boleh lebih kecil daripada saiz kandungannya pada paksi utama.
Tetapan lalai ialah...
min-width: automin-height: auto... Berkenaan untuk melenturkan item dalam arah baris dan lajur masing-masing.
Anda boleh menetapkan item flex kepada:
min-width: 0min-height: 0overflow: hidden（或任何其他值，除了visible)Spesifikasi Flexbox
Mengenai
autonilai...Dalam erti kata lain:
.min-width: auto和min-height: auto默认仅在overflow为visibledanlimpahankelihatan.overflow的值不是visible，则min-size属性的值为0Jikaoverflow: hidden可以替代min-width: 0和min-height: 0Oleh itu,overflow: hiddenboleh menggantikandan...- Algoritma saiz minimum hanya berfungsi pada gelendong.
Sebagai contoh, item fleksibel dalam bekas berorientasikan baris tidak mendapat
- secara lalai.
- Untuk penjelasan yang lebih terperinci, lihat siaran ini:
lebar min ditunjukkan secara berbeza dalam arah lentur: baris dan arah lentur: lajur
min-height: autoAnda telah menggunakan lebar min: 0 tetapi projek anda masih tidak akan mengecut?
Bekas Flex Bersarang
Jika anda bekerja dengan item flex pada berbilang peringkat struktur HTML anda, anda mungkin mahu mengatasimin-width: auto/min-height: auto/
min-width: auto的较高级别flex项目可以阻止下方嵌套的具有min-width: 0lalai pada item peringkat lebih tinggi.Pada asasnya, item flex tahap yang lebih tinggi dengan
menghalang item bersarang di bawah dengandaripada mengecut.- Contoh:
- Barang fleksibel tidak boleh dikecilkan lebih kecil daripada kandungannya
- Suaikan elemen anak kepada elemen ibu bapa
sifat CSS ruang putih bercanggah dengan reka letak fleksibel
Pertimbangan pemaparan penyemak imbas
intervensi.) Akibatnya, ramai orang melihat reka letak mereka (terutamanya bar skrol yang diingini) berfungsi seperti yang diharapkan dalam Chrome, tetapi tidak dalam Firefox/Edge. Untuk maklumat lebih terperinci, lihat di sini: perbezaan flex-mengecut antara Firefox dan Chromemin-width: 0/min-height: 0的默认值，要么（2）根据某个神秘的算法在某些情况下自动应用0Chrome lwn. Firefox/EdgeSejak 2017, Chrome nampaknya sama ada (1) kembali kepada nilai lalai/atau (2) secara automatik menggunakan nilai lalai0dalam situasi tertentu berdasarkan beberapa algoritma misteri. (Ini mungkin apa yang mereka panggilIE11
Seperti yang dinyatakan dalam spesifikasi, nilai
min-width和min-height属性的auto值是“新的”。这意味着某些浏览器可能仍然默认呈现0值，因为它们在值更新之前实现了flex布局，并且因为0是CSS 2.1中min-width和min-height的初始值。IE11是其中之一。其他浏览器已经更新到了在flexbox规范中定义的较新的auto.Demo yang disemak semula
.container { display: flex; } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px; min-width: 0; /* NEW */ } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } .col4 { flex: 4; background: red }