css – 每行与flexbox相等的元素数？

我有动态内容和响应布局,因此项目数量和可用宽度将有所不同.有时,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;
}

http://codepen.io/anon/pen/qEQzqY

解决方法

如果元素数量在原因之内,则可以使用 quantity queries技术为每个单独的案例编写css.

css – 每行与flexbox相等的元素数？

解决方法

相关文章