我有动态内容和响应布局,因此项目数量和可用宽度将有所不同.有时,div中的元素将需要包装到第二个“行”上.
使用flexBox(或任何其他CSS方法)可以使每行上的项数相等吗？
<div class="cont">
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>
.cont {
display: -webkit-flex;
display: -ms-flexBox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border: 1px solid grey;
margin: auto;
width: 60%;
padding: 10px;
}
.elem {
height: 100px;
width: 100px;
border: 1px solid blue;
display: -webkit-flex;
display: -ms-flexBox;
display: flex;
margin-right: 10px;
margin-bottom: 10px;
}
解决方法
如果元素数量在原因之内,则可以使用
quantity queries技术为每个单独的案例编写css.
