有没有办法告诉flexBox项目填充剩余的空间,但是一旦它们变得比它们的内容小,就会换行.
但是有些项目具有固定的百分比宽度.
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:在容器上换行以做这样的事情,但正如你在pen中看到的那样它根本不会包装.如果我在.grid__item中删除flex:1,它们会包装,但不是一直到非常小的屏幕尺寸.
最佳答案
你当然可以允许包装,但我不完全确定你的效果是什么.如果你有一个关于你如何期待这个包裹的图像我们可以从那里增强.
* {
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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。