Html 为什么不';t flex项目缩小到超过内容大小?
我有4个flexbox列,一切正常,但当我向列中添加一些文本并将其设置为大字体时,由于flex属性,这会使列的宽度超出应有的范围 我试着使用Html 为什么不';t flex项目缩小到超过内容大小?,html,css,flexbox,Html,Css,Flexbox,我有4个flexbox列,一切正常,但当我向列中添加一些文本并将其设置为大字体时,由于flex属性,这会使列的宽度超出应有的范围 我试着使用wordbreak:break word,这很有帮助,但当我将列的大小调整到非常小的宽度时,文本中的字母会被分成多行(每行一个字母),而列的宽度不会小于一个字母的大小 看这个 (开始时,第一列是最小的,但当我调整窗口大小时,它是最宽的列。我只想始终遵守flex设置;flex大小1:3:4:4) 我知道,将字体大小和列填充设置为较小将有助于。。。但还有其他解决
wordbreak:break word
,这很有帮助,但当我将列的大小调整到非常小的宽度时,文本中的字母会被分成多行(每行一个字母),而列的宽度不会小于一个字母的大小
看这个
(开始时,第一列是最小的,但当我调整窗口大小时,它是最宽的列。我只想始终遵守flex设置;flex大小1:3:4:4)
我知道,将字体大小和列填充设置为较小将有助于。。。但还有其他解决办法吗
我无法使用溢出-x:hidden
.container{
显示器:flex;
宽度:100%
}
上校{
最小高度:200px;
填充:30px;
断字:断字
}
.col1{
弹性:1;
背景:橙色;
字号:80px
}
.col2{
弹性:3;
背景:黄色
}
.col3{
弹性:4;
背景:天蓝色
}
.col4{
弹性:4;
背景:红色
}
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
弹性物品的自动最小尺寸
您遇到了flexbox默认设置
弹性项不能小于其沿主轴的内容大小
默认值是
最小宽度:自动
最小高度:自动
最小宽度:0
最小高度:0
(或任何其他值,除了可见的)溢出:隐藏的
Flexbox规范 为了为flex项目提供更合理的默认最小尺寸,此 规范引入了一个新的
auto
值作为
CSS 2.1中定义的min-width
和min-height
属性
关于auto
值
在其溢出
在主轴上可见的弹性项目上,当在弹性项目的主轴最小尺寸属性上指定时,指定自动最小尺寸。否则将计算为0
换言之:
和min-width:auto
默认值仅在min-height:auto
可见时适用overflow
- 如果
值不可见,则最小大小属性的值为溢出
0
- 因此,
可以替代overflow:hidden
和minwidth:0
minheight:0
- 最小尺寸算法仅适用于主轴
- 例如,行方向容器中的弹性项在默认情况下不会获得
min height:auto
- 有关更详细的说明,请参阅本帖:
您已应用最小宽度:0,但该项仍不收缩? 嵌套Flex容器 如果在HTML结构的多个级别上处理flex项,可能需要在更高级别的项上覆盖默认的
min-width:auto
/min-height:auto
基本上,具有min-width:auto
的更高级别弹性项可以防止嵌套在以下具有min-width:0
的项上的收缩
示例:
浏览器渲染注释
- Chrome与Firefox/Edge
至少从2017年开始,Chrome似乎(1)恢复到
/最小宽度:0
默认值,或者(2)基于神秘算法在某些情况下自动应用最小高度:0
默认值。(这可能就是他们所说的一个。)因此,许多人看到他们的布局(尤其是所需的滚动条)在Chrome中的效果与预期一致,但在Firefox/Edge中却没有。此处将更详细地介绍此问题:0
- IE11
如规范中所述,
和minwidth
属性的minheight
值为“新”。这意味着某些浏览器在默认情况下仍可能呈现auto
值,因为它们在值更新之前实现了flex布局,并且0
是中0
和min width
的初始值。其他浏览器已更新为中定义的较新的min height
值auto
修订版演示
.container{
显示器:flex;
}
上校{
最小高度:200px;
填充:30px;
断字:断字
}
.col1{
弹性:1;
背景:橙色;
字号:80px;
最小宽度:0;/*新*/
}
.col2{
弹性:3;
背景:黄色
}
.col3{
弹性:4;
背景:天蓝色
}
.col4{
弹性:4;
背景:红色
}
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
我发现这些年来,flex和grid都一再受到这一问题的困扰,因此我提出以下建议:
* { min-width: 0; min-height: 0; }
然后只要使用minwidth:auto
或minheight:auto
就可以了
事实上,为了使所有布局更加合理,还需要加入框大小:
* { box-sizing: border-box; min-width: 0; min-height: 0; }
有人知道有没有什么奇怪的后果吗?我在几年的时间里都没有遇到过任何问题。事实上,我想不出有哪种情况我想从内容向外布局到flex/grid,而不是从flex/grid向内布局到内容——当然,如果它们存在的话,它们是罕见的。所以这感觉像是一个糟糕的违约。但也许我遗漏了什么?对于下面的代码,添加
w