有没有办法告诉flexbox项目填充剩余的空间,但是一旦它们变得比它们的内容小就会换行。
虽然有些项目的宽度是固定的。
HTML
<div class="grid">
<div class="grid__item">column auto</div>
<div class="grid__item one-third">column 33.333%</div>
<div class="grid__item one-third">column 33.333%</div>
<div class="grid__item">column auto</div>
</div>
CSS
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background: gray;
}
.grid__item {
background: red;
flex: 1;
}
.one-third {
flex-basis: 33.333%;
background: green;
}
我希望固定宽度项目(绿色)的宽度始终为33.333%。其他项目(红色)应填充剩余空间。如果屏幕变小,我希望在没有足够空间展示其内容的情况下将项目换行。
我以为我可以简单地在容器上使用flex: 1
和flex-wrap: wrap
来执行类似的操作,但正如您在pen中看到的那样,它根本不会包装。如果我删除flex: 1
.grid__item
中的x.2
,那么它们会被包裹,但不会一直到非常小的屏幕尺寸。
答案 0 :(得分:8)
你当然可以允许包装,但我并不完全确定效果是你所追求的。如果你有一个关于你如何看待这个包裹的图像,我们可以从那里加强。
* {
box-sizing: border-box;
}
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background: gray;
}
.grid__item {
background: red;
flex: 1 0 auto;
padding: 1em;
}
.one-third {
flex: 0 0 33.333%;
background: green;
border: 1px solid lightgreen;
}
&#13;
<div class="grid">
<div class="grid__item">Lorem ipsum dolor sit amet</div>
<div class="grid__item one-third">column 33.333%</div>
<div class="grid__item one-third">column 33.333%</div>
<div class="grid__item">Lorem ipsum dolor sit amet,</div>
</div>
&#13;
答案 1 :(得分:3)