suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Warum können Flex-Elemente nicht unter die Inhaltsgröße schrumpfen?

Ich habe 4 Flexbox-Spalten und alles funktioniert gut, aber wenn ich der Spalte etwas Text hinzufüge und sie auf eine große Schriftgröße einstelle, wird die Spalte aufgrund der Flex-Eigenschaft breiter, als sie sein sollte.

Ich habe es mit word-break:break-word versucht und es hat geholfen, aber wenn ich die Spaltenbreite auf eine sehr kleine Breite ändere, werden die Buchstaben im Text in mehrere Zeilen aufgeteilt (ein Buchstabe pro Zeile), und die Breite der Spalte wird jedoch nie kleiner als eins Die Größe der Buchstaben.

Sehen Sie sich dieses Video an (Am Anfang ist die erste Spalte die kleinste, aber wenn ich die Größe des Fensters ändere, ist sie die breiteste Spalte. Ich möchte einfach immer die Flex-Einstellungen respektieren; Flex-Größe 1:3:4:4)

Ich weiß, es würde helfen, die Schriftgröße und den Spaltenabstand kleiner einzustellen ... aber gibt es eine andere Lösung?

Ich kann overflow-x:hidden nicht verwenden.

JSFiddle


.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.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>


P粉038161873P粉038161873438 Tage vor764

Antworte allen(2)Ich werde antworten

  • P粉884667022

    P粉8846670222023-10-16 12:25:29

    我发现多年来 Flex 和 grid 一直困扰着我，所以我提出以下建议：

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

    然后如果您需要这种行为，只需使用 min-width: auto 或 min-height: auto 即可。

    事实上，还可以加入框大小以使所有布局更加合理：

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

    有人知道是否会产生任何奇怪的后果吗？在混合使用上述方法的几年里我还没有遇到过任何问题。事实上，我想不出任何我想要从内容向外布局到 Flex/Grid 的情况，而不是从 Flex/Grid 向内布局到内容的情况 --- 当然，如果它们存在，它们也是罕见的。所以这感觉像是一个糟糕的默认值。但也许我错过了一些东西？

    Antwort
    0
  • P粉557957970

    P粉5579579702023-10-16 11:35:45

    Flex 项目的自动最小尺寸

    您遇到了 Flexbox 默认设置。

    弹性项目不能小于其内容沿主轴的尺寸。

    默认值是...

    • 最小宽度：自动
    • 最小高度：自动

    ...分别用于行方向和列方向的弹性项目。

    您可以通过将弹性项目设置为来覆盖这些默认值：

    • 最小宽度：0
    • 最小高度：0
    • 溢出：隐藏（或任何其他值，可见除外）

    Flexbox 规范

    关于auto值...

    换句话说：

    • min-width: auto 和 min-height: auto 默认值仅在overflow 可见时适用.
    • 如果overflow值不可见，则min-size属性的值为0。
    • 因此，overflow: hide 可以替代 min-width: 0 和 min-height: 0。

    还有...

    你已经应用了 min-width: 0 但项目仍然没有缩小？

    嵌套 Flex 容器

    如果您要处理 HTML 结构的多个级别上的 Flex 项目，则可能需要覆盖默认的 min-width: auto / min-height: auto 位于更高级别的项目上。

    基本上，具有 min-width: auto 的更高级别的 Flex 项目可以防止使用 min-width: 0 嵌套在下面的项目收缩。

    示例：

    浏览器渲染说明

    • Chrome 与 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 是 min 的初始值CSS 2.1。 IE11 就是这样的浏览器。 其他浏览器已更新到较新的 flexbox 规范 值a>.

    修改后的演示

    .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>

    Antwort
    0
  • StornierenAntwort