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;
}

续{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
边框：1px纯灰；
保证金：自动；
宽度：60%；
填充：10px；
}
埃伦先生{
高度：100px；
宽度：100px；
边框：1px纯蓝色；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
右边距：10px；
边缘底部：10px；
}

---

如果元素的数量在合理范围内，那么使用该技术为每个案例编写css可能是可行的。

虽然您要求css解决方案，但我找不到，所以我创建了一个基于jquery的解决方案（我认为可以进行很多优化）

此解决方案仅在您知道项目宽度且如示例中所示是静态的（当前为

112px

带

border

和

margin

）时有效

希望这适合你的需要

Css和HTML保持不变

Javascript

$（窗口）。调整大小（函数（）{
var-elementWidth=112；
变量元素=$（“.elem”）；
var parentWidth=$（“.cont”）.width（）；
var rowscont=Math.ceil（（Elements.length*elementWidth）/parentWidth）；
var perRow=Math.ceil（Elements.length/rowsunt）；
perRow=perRow*elementWidth>parentWidth？perRow-1:perRow；
$。每个（元素、功能（索引、项）{
$（this.css（“右边距“，”）；
});
对于（i=1；i 1；i++）{
如果（i*perRow如dalgard所说，如果您想要CSS解决方案，那么数量查询就是一个解决方案

但是，您需要编写几个案例

让我们看看它在七要素案例中的作用


.cont{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
边框：1px纯灰；
保证金：自动；
宽度：500px；
填充：10px；
}
埃伦先生{
高度：100px；
宽度：100px；
边框：1px纯蓝色；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
右边距：10px；
边缘底部：10px；
}
第n个孩子（7）：第一个孩子{
边框颜色：红色；
}
.elem:n最后一个孩子（7）：第一个孩子~.elem:n最后一个孩子（3）{
边框颜色：绿色；
右边距：100px；
}
我迟到了两年多，但我喜欢马克西姆·斯捷潘年科的想法。
我最初尝试使用flexbox的纯css解决方案，使用：

flex-direction: column;
align-content: flex-start;

但这需要您指定高度，并根据需要调整高度

因此，使用Maksym Stepanenko根据需要正确调整边距的备份方法，无论是浮动元素还是flexbox包装元素。
最后我纠正了Maksym Stepanenko在这个例子中的一些计算：

或下面的代码片段（使用库“检测元素大小”，以便容器侦听器工作）


/**
*检测元素大小
*
* https://github.com/sdecima/javascript-detect-element-resize
*塞巴斯蒂安·德西玛
*
*版本：0.5.3
**/
（功能（）{
var attachEvent=document.attachEvent，
stylesCreated=false；
如果（！attachEvent）{
var requestFrame=（函数（）{
var raf=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | | window.webkitRequestAnimationFrame||
函数（fn）{returnwindow.setTimeout（fn，20）；}；
返回函数（fn）{返回raf（fn）；}；
})();
var cancelFrame=（函数（）{
var cancel=window.cancelAnimationFrame | | | window.mozCancelAnimationFrame | | window.webkitcanceanimationframe||
window.clearTimeout；
返回函数（id）{returncancel（id）；}；
})();
函数重置触发器（元素）{
var触发器=元素。重设触发器，
expand=triggers.firstElementChild，
contract=triggers.lastElementChild，
expandChild=expand.firstElementChild；
contract.scrollLeft=contract.scrollWidth；
contract.scrollTop=contract.scrollHeight；
expandChild.style.width=expand.offsetWidth+1+'px'；
expandChild.style.height=expand.offsetHeight+1+'px'；
expand.scrollLeft=expand.scrollWidth；
expand.scrollTop=expand.scrollHeight；
};
函数检查触发器（元素）{
return element.offsetWidth！=element.\uu resizeLast\uuu.width||
element.offsetHeight！=element.\u resizeLast\u.height；
}
函数scrollListener（e）{
var元素=这个；
重置触发器（此）；
如果（此.\uuuu resizeRAF\uuuuu）取消帧（此.\uuuuuu resizeRAF\uuuu）；
此.\uuuu resizeRAF\uuuu=requestFrame（函数（）{
if（检查触发器（元素））{
元素。_resizeLast__;.width=元素.offsetWidth；
element.\uuuuu resizeLast\uuuuuuuu.height=element.offsetHeight；
元素。resizeListeners。forEach（函数（fn）{
fn.调用（元素e）；
});
}
});
};
/*检测CSS动画支持检测元素显示/重新附加*/
var animation=false，
animationstring='animation'，
keyframeprefix=“”，
animationstartevent='animationstart'，
domPrefixes='Webkit Moz O ms'.split（''），
startEvents='webkitAnimationStart animationstart oAnimationStart MSAnimationStart'。拆分（“”），
pfx=“”；
{
var elm=document.createElement（'fakeelement'）；
如果（elm.style.animationName！==未定义）{animation=true；}
如果（动画===false）{
对于（var i=0；iflex-direction: column;
align-content: flex-start;