使用flexbox每行的元素数量相等？

Question

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

Answer 1

如果元素的数量在合理范围内，那么使用数量查询技术为每个单独的情况编写 css 可能是可行的。