本文介绍了如何每行显示三列?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我一直在尝试每行显示三列.可以使用 flexbox 吗?
我目前的 CSS 是这样的:
.mainDiv {显示:弹性;左边距:221px;边距顶部:43px;}
此代码将所有内容放在一行中.我想添加一个约束,每行只显示三个记录.
解决方案
这可能就是您要找的:
body>div {背景:#aaa;显示:弹性;flex-wrap: 包裹;}正文>div>div{弹性增长:1;宽度:33%;高度:100px;}body>div>div:nth-child(even) {背景:#23a;}body>div>div:nth-child(odd) {背景:#49b;}
<div></div><div></div><div></div><div></div><div></div><div></div>
I have been trying to show three columns per row. Is it possible using flexbox?
My current CSS is something like this:
.mainDiv {
display: flex;
margin-left: 221px;
margin-top: 43px;
}
This code puts all content in a single row.I want to add a constraint to just shows three records per row.
解决方案
This may be what you are looking for:
body>div {
background: #aaa;
display: flex;
flex-wrap: wrap;
}
body>div>div {
flex-grow: 1;
width: 33%;
height: 100px;
}
body>div>div:nth-child(even) {
background: #23a;
}
body>div>div:nth-child(odd) {
background: #49b;
}
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
这篇关于如何每行显示三列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!