当前位置: 首页 > 面试题库 >

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

呼延靖
2023-03-14
问题内容

我有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规格

4.5。 自动伸缩物品的最小尺寸

为了为弹性商品提供更合理的默认最小尺寸,此规范引入了一个新auto值作为CSS 2.1中定义的min-widthmin- height属性的初始值。

关于auto价值…

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

换一种说法:

  • min-width: automin-height: auto违约时才适用overflowvisible
  • 如果overflow值不是visible,则min-size属性的值为0
  • 因此,overflow: hidden可以代替min-width: 0min-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-widthmin-height性质是“新”。这意味着某些浏览器可能仍0默认情况下呈现值,因为它们在值更新之前实现了flex布局0min-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>


 类似资料:
  • 问题内容: 我正在尝试制作多个具有相同高度的正方形行(每行3个)。 我为此编写了一些HTML和CSS,但所有框都在同一行上。 这是我到目前为止的内容: 当我用此页面加载页面时,所有框都出现了,但是它们都在一行上,超过了父div的100%宽度。 任何帮助深表感谢。 问题答案: flex容器的初始设置为 。 这意味着,当您创建一个伸缩容器(通过应用元素或将其应用于元素)时,所有子元素(“伸缩项”)都限

  • 问题内容: 我尝试使用和设置元素的样式。 然而,它没有工作:表现得像,并表现得像个。 在Firefox和Chrome上都会发生这种情况,但奇怪的是,它在IE上有效。 是虫子吗?在HTML5和CSS Flexible Box Layout规范中,我都找不到应该有的特殊行为。 问题答案: 根据错误984869- 对按钮元素不起作用, 不能在纯CSS中实现(由浏览器实现),因此从CSS的角度来看,它们有

  • 我有一个为用户显示的元素列表,还有一个图标和两个按钮。到目前为止还不错,但我希望这个列表能够扩展到移动设备,并在必要时缩小。 当列表中的文本太长时,会阻止页面收缩,并强制显示水平滚动条。我试图实现的是,长描述文本缩小,在末尾显示3个点(省略号)。 容器元素显示为flex,文本容器具有flex收缩1,但它仍然拒绝收缩和溢出。 有人能告诉我我做错了什么吗?为什么是拒绝收缩?是否有任何方法可以在必要时仅

  • 如果我调整窗口的大小小于最小宽度flex项目的总数(此处为653px),则会出现一个滚动条,但flexbox采用当前窗口的大小,并且flex项目没有红色背景,我想知道如何在不键入以下特定值的情况下为flexbox容器设置最小宽度: 我不希望收缩flex项目,但一个css的方式来获得: flexbox.min(flex_items_min_width) https://codepen.io/papa

  • 更新:如果我必须使用flexbox,我认为没有简单的解决方案。我将使用“flex shrink:0”并使用媒体查询来调整设计。无论如何,谢谢你的帮助。 我有一个水平列表(显示: flex)与多个元素。当我缩小窗口大小时,列表元素开始缩小。不幸的是,元素的宽度几乎保持不变。锂元素占据了太多的空间。我希望li-元件的大小适合内容。如果我把"flex-收缩: 0"添加到li-元素中,宽度是正确的,但是我

  • 我正在尝试在CSS flexbox中,将两个相邻的绘图拟合到一起。我希望它们在调整窗口大小时调整大小。当窗口变大时,它会按预期工作,但当窗口变小时,绘图不会缩小。 JSFiddle:https://jsfiddle.net/bd0reepd/ 我可能误解了flexbox的工作原理,但如果我用图像替换绘图,它们会像预期的那样缩小。 我试着调试它,发现plotlys的内部函数,它调用并相应地设置打印大