Mengapa item lentur tidak boleh mengecil kepada kurang daripada saiz kandungan?
P粉432906880
2023-08-21 22:36:03
<p>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. </p>
<p>Saya cuba menggunakan <code>word-break: break-word</code> 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. </p>
<p>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)</p>
<p>Saya tahu bahawa menetapkan saiz fon dan padding lajur kepada nilai yang lebih kecil akan membantu... tetapi adakah terdapat sebarang penyelesaian lain? </p>
<p>Saya tidak boleh menggunakan <code>overflow-x: hidden</code>. </p>
<p>JSFiddle</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.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
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div>
<div class="col col4">Lorem ipsum dolor</div>
</div></pre>
<p><br /></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我发现这在过去的几年里对于flex和grid都多次给我带来了麻烦，所以我建议以下操作：
* { min-width: 0; min-height: 0; }如果需要这种行为，只需使用
min-width: auto或min-height: auto。实际上，还可以加入box-sizing以使所有布局更合理：
* { box-sizing: border-box; min-width: 0; min-height: 0; }有人知道是否存在任何奇怪的后果吗？在使用上述方法的几年中，我没有遇到任何问题。实际上，我想不出任何情况下我会希望从内容向外布局到flex/grid，而不是从flex/grid向内布局到内容 --- 而且如果这种情况存在，那肯定很少见。所以这感觉像是一个糟糕的默认设置。但也许我漏掉了什么？
Flex项目的自动最小尺寸
您遇到了flexbox的默认设置。
Flex项目在主轴上不能小于其内容的尺寸。
默认设置为...
min-width: automin-height: auto...分别适用于行方向和列方向的flex项目。
您可以通过设置flex项目为：
min-width: 0min-height: 0overflow: hidden（或任何其他值，除了visible）Flexbox规范
关于
auto值...换句话说：
min-width: auto和min-height: auto默认仅在overflow为visible时适用。overflow的值不是visible，则min-size属性的值为0。overflow: hidden可以替代min-width: 0和min-height: 0。以及...
min-height: auto。您已经应用了min-width: 0，但项目仍然不会缩小？
嵌套的Flex容器
如果您在HTML结构的多个层次上处理flex项目，则可能需要覆盖较高级别项目上的默认
min-width: auto/min-height: auto。基本上，具有
min-width: auto的较高级别flex项目可以阻止下方嵌套的具有min-width: 0的项目缩小。示例：
浏览器渲染注意事项
Chrome vs. Firefox / Edge
自2017年以来，Chrome似乎要么（1）恢复到
min-width: 0/min-height: 0的默认值，要么（2）根据某个神秘的算法在某些情况下自动应用0的默认值。（这可能是他们所谓的干预。）因此，许多人在Chrome中看到他们的布局（尤其是期望的滚动条）按预期工作，但在Firefox / Edge中不起作用。有关更详细的信息，请参阅这里：Firefox和Chrome之间的flex-shrink差异IE11
如规范中所述，
min-width和min-height属性的auto值是“新的”。这意味着某些浏览器可能仍然默认呈现0值，因为它们在值更新之前实现了flex布局，并且因为0是CSS 2.1中min-width和min-height的初始值。IE11是其中之一。其他浏览器已经更新到了在flexbox规范中定义的较新的auto值。修订后的演示
.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 }