为什么弹性项目不能缩小到超过内容大小？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有4个flexbox列，并且一切正常，但是当我向列中添加一些文本并将其设置为大字体时，由于flex属性，它使列变宽了。

我尝试使用word-break: break-word它并对其有所帮助，但是当我将列的大小调整为非常小的宽度时，仍然将文本中的字母分成多行（每行一个字母），但是该列的宽度不会小于一个字母的大小。

（开始时，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终遵循flex设置； flex大小为1：3：4：4）

我知道，将字体大小和列填充设置为较小会有所帮助……但是还有其他解决方案吗？

我不能使用overflow-x: hidden。

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

回答：

弹性物料的自动最小尺寸

您遇到了flexbox默认设置。

伸缩项目不能小于其内容沿主轴的大小。

默认值为…

  • min-width: auto

  • min-height: auto

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

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

  • min-width: 0

  • min-height: 0

  • overflow: hidden（或其他任何值，除外visible）

Flexbox规格

为了为弹性商品提供更合理的默认最小尺寸，此规范引入了一个新auto值作为CSS 2.1中定义的min-width和min-

height属性的初始值。

关于auto价值…

在柔性项，它overflow是visible在与主轴线，当在柔性项的主轴最小尺寸属性指定，指定了一个 自动的最小尺寸 。否则计算为0。

换一种说法：

  • 在min-width: auto和min-height: auto违约时才适用overflow的visible。

  • 如果overflow值不是visible，则min-size属性的值为0。

  • 因此，overflow: hidden可以代替min-width: 0和min-height: 0。

和…

  • 最小尺寸算法仅适用于主轴。

  • 例如，min-height: auto默认情况下，行方向容器中的flex项目不会获得。

  • 有关更详细的说明，请参阅此帖子：

  • 最小宽度渲染在flex-direction：行和flex-direction：列上有所不同

您已应用min-width：0，但项目仍然没有缩小？

嵌套式弹性容器

如果要在HTML结构的多个级别上处理弹性项目，则可能有必要在较高级别的项目上覆盖默认值min-width: auto/ min-height:auto。

基本上，带有的较高级别的柔韧性商品min-width: auto可以防止嵌套在下方的商品收缩min-width: 0。

浏览器渲染说明

  • Chrome与Firefox / Edge

从2017年开始，Chrome似乎（1）恢复为min-width:0/min-height:0默认值，或者（2）0在某些情况下根据神秘算法自动应用默认值。结果，这就是他们所说的一种。）因此，许多人看到他们的布局（特别是所需的滚动条）在Chrome中工作正常，但在Firefox /Edge中却没有。

  • IE11

正如规范所指出的，auto对价值min-width和min-height性质是“新”。这意味着某些浏览器可能仍0默认情况下呈现值，因为它们在值更新之前实现了flex布局0，min-width并且min-height是CSS2.1中和的初始值

修改后的演示

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

以上是 为什么弹性项目不能缩小到超过内容大小？ 的全部内容， 来源链接： utcz.com/qa/419789.html

回到顶部