代码之家 › 专栏 › 技术社区 › haki

如何使用flex grow[duplicate]在容器中添加可滚动导航

flexbox css3 css html

haki · 技术社区 · 7 年前

我有4个flexbox列,一切正常,但是当我向一个列添加一些文本并将其设置为大字体时,由于flex属性的原因,这会使列的宽度超出其应有的范围。

我试着用 word-break: break-word 这很有帮助,但是当我把列的宽度调整到一个很小的宽度时,文本中的字母会被分成多行(每行一个字母),但是列的宽度不会小于一个字母的大小。

看这个 video (开始时,第一列是最小的,但当我调整窗口大小时,它是最宽的列。我只想始终尊重flex设置;flex大小为1:3:4:4)

我知道,将字体大小和列填充设置为较小将有助于。。。但还有其他解决办法吗?

我不能用 overflow-x: hidden

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>

0 回复 | 直到 7 年前

voracity 5 年前

灵活项目的自动最小大小

弹性项不能小于其沿主轴的内容大小。

min-width: auto
min-height: auto

…分别用于行方向和列方向的flex项。

通过将flex items设置为:

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

Flexbox规格

4.5. Automatic Minimum Size of Flex Items

为了为flex项提供一个更合理的默认最小大小,这个 auto 值作为初始值这个 min-width 和 min-height css2.1中定义的属性。

关于 汽车

在一个灵活的项目上 overflow 是在主轴中,如果在“flex items”“主轴最小尺寸”属性中指定,则指定一个 自动最小尺寸 . 否则它会计算到 0 .

这个 最小宽度:自动 和默认值仅在以下情况下适用 溢流 是 看得见的 .
溢流 价值不是 看得见的 ,最小大小属性的值为 0 .
因此, 可以替代 最小宽度:0 最小高度:0 .

还有。。。

最小尺寸算法仅适用于主轴。
最小高度:自动 默认情况下。
有关更详细的解释,请参阅以下帖子:
- min-width rendering differently in flex-direction: row and flex-direction: column

您已应用最小宽度:0,但项目仍不收缩?

嵌套Flex容器

如果在HTML结构的多个级别上处理flex项,则可能需要重写默认值 最小宽度:自动 / 最小高度:自动

基本上,更高级别的灵活项目可以防止下面嵌套的项收缩 最小宽度:0 .

示例:

浏览器渲染注释

Chrome与Firefox/Edge

至少从2017年开始,Chrome要么(1)恢复到 最小宽度:0 / 默认值,或(2)自动应用基于神秘算法的某些情况下的默认值。(这可能就是他们所说的 intervention 因此,很多人看到他们的布局(尤其是所需的滚动条)在Chrome中的工作方式与预期一致,但在Firefox/Edge中却没有。这个问题在这里有更详细的介绍: flex-shrink discrepancy between Firefox and Chrome
IE11标准

如规范所述 汽车 的值 最小宽度 和 最小高度 0 默认值,因为它们在更新值之前实现了flex布局,并且因为 0 的初始值 最小宽度 和 最小高度 在里面 CSS 2.1 . One such browser is IE11. 其他浏览器已经更新到更新的 汽车 中定义的值 flexbox spec .

修订版演示

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

jsFiddle