我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.
我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.
观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 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> …假设我们有一个宽度为400px的弹性容器.
在这个容器里面有三个flex项:
:nth-child(1) { flex: 0 2 300px; } /* flex-grow, flex-shrink, flex-basis */
:nth-child(2) { flex: 0 1 200px; }
:nth-child(3) { flex: 0 2 100px; }
因此,flex项的总宽度为600px,容器中的可用空间为-200px.
在这个问题,本文和flexbox规范的帮助下,我学会了在flex项目中分配负空闲空间的基本公式:
步骤1
将每个收缩值乘以其基础并将它们全部加在一起:
:nth-child(1) 2 * 300 = 600
:nth-child(2) 1 * 200 = 200
:nth-child(3) 2 * 100 = 200
总计= 1000
第2步
将上面的每个项目除以总数来确定收缩因子:
:nth-child(1) 600 / 1000 = .6
:nth-child(2) 200 / 1000 = .2
:nth-child(3) 200 / 1000 = .2 …当只有一行“弹性项目”时，Chrome和Firefox显示不同的结果。当有多行（换行）时，Chrome和Firefox显示相同的结果！
那么为什么会这样呢？那是一个错误，还是我缺少一些“默认值”或差异？
body{
background-color: teal;
}
.flexContainer{
background-color: blue;
border: 1px solid black;
height: 300px;
}
.flexItem{
background-color: red;
border: 1px solid black;
}
.flexContainer{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: flex-start;
}
.flexItem{
flex: 0 1 0;
}<div class="flexContainer">
<div class="flexItem">1111111111111111111</div>
<div class="flexItem">2222<br/>2222</div>
<div class="flexItem">3333<br/>3333<br/>3333</div>
<div class="flexItem">4444444444444444444</div>
</div>