Warum können Flex-Elemente nicht auf weniger als die Inhaltsgröße verkleinert werden?
P粉432906880
P粉432906880 2023-08-21 22:36:03
0
2
505
<p>Ich habe 4 Flexbox-Spalten und alles funktioniert einwandfrei, aber wenn ich einer Spalte Text hinzufüge und sie auf eine große Schriftgröße einstelle, wird die Spalte aufgrund der Flex-Eigenschaft breiter, als sie sein sollte. </p> <p>Ich habe versucht, <code>word-break: break-word</code> zu verwenden, und es hat geholfen, aber als ich die Spaltenbreite auf eine sehr kleine Breite geändert habe, wurden die Buchstaben im Text in mehrere Zeilen aufgeteilt (eine). (Buchstabe pro Zeile), aber die Breite der Spalte wird nicht kleiner als die Größe eines Buchstabens sein. </p> <p>Sehen Sie sich dieses Video an (Am Anfang ist die erste Spalte die kleinste, aber wenn ich die Größe des Fensters ändere, wird sie zur breitesten Spalte. Ich möchte einfach immer die Flex-Einstellungen respektieren; die Flex-Größe beträgt 1:3: 4 :4)</p> <p>Ich weiß, dass es hilfreich ist, die Schriftgröße und den Spaltenabstand auf kleinere Werte zu setzen ... aber gibt es eine andere Lösung? </p> <p>Ich kann <code>overflow-x:hidden</code> nicht verwenden. </p> <p>JSFiddle</p> <p><br /></p> <pre class="brush:css;toolbar:false;">.container { Anzeige: Flex; Breite: 100 % } .col { Mindesthöhe: 200 Pixel; Polsterung: 30px; Wortbruch: Wortbruch } .col1 { Flex: 1; Hintergrund: orange; Schriftgröße: 80px } .col2 { Flex: 3; Hintergrund: gelb } .col3 { Flex: 4; Hintergrund: himmelblau } .col4 { Flex: 4; Hintergrund: rot }</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>
P粉432906880
P粉432906880

Antworte allen(2)
P粉440453689

我发现这在过去的几年里对于flex和grid都多次给我带来了麻烦,所以我建议以下操作:

* { min-width: 0; min-height: 0; }

如果需要这种行为,只需使用min-width: automin-height: auto

实际上,还可以加入box-sizing以使所有布局更合理:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

有人知道是否存在任何奇怪的后果吗?在使用上述方法的几年中,我没有遇到任何问题。实际上,我想不出任何情况下我会希望从内容向外布局到flex/grid,而不是从flex/grid向内布局到内容 --- 而且如果这种情况存在,那肯定很少见。所以这感觉像是一个糟糕的默认设置。但也许我漏掉了什么?

P粉752479467

Flex项目的自动最小尺寸

您遇到了flexbox的默认设置。

Flex项目在主轴上不能小于其内容的尺寸。

默认设置为...

  • min-width: auto
  • min-height: auto

...分别适用于行方向和列方向的flex项目。

您可以通过设置flex项目为:

  • min-width: 0
  • min-height: 0
  • overflow: hidden(或任何其他值,除了visible

Flexbox规范

关于auto值...

换句话说:

  • min-width: automin-height: auto默认仅在overflowvisible时适用。
  • 如果overflow的值不是visible,则min-size属性的值为0
  • 因此,overflow: hidden可以替代min-width: 0min-height: 0

以及...


您已经应用了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-widthmin-height属性的auto值是“新的”。这意味着某些浏览器可能仍然默认呈现0值,因为它们在值更新之前实现了flex布局,并且因为0CSS 2.1min-widthmin-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
}
<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>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage