flex设定每⾏的元素个数，且元素有间隔的⼩技巧最简单的⽅法在最后，可拖⾄最后查看
若是设置每⾏显⽰的个数，则设置⼦元素的宽度即可，如每⾏显⽰三个：则⽗元素display：flex；flex-wrap: wrap;align-content: flex-start；⼦元素：flex：1；width：33.3%； ，这样每个元素占1/3，也就是每⾏展⽰三个。
但元素之间需要有间隔呢，也就是需要设置margin值，那我们就需请出css中calc()函数来计算⼦元素的宽度。
具体计算⽅式为：( ⾏总宽度 - (总margin+boder) ) / 个数html的flex布局
注意 - 号的前后空格
如下图就是每⾏显⽰4个元素，元素的之间的margin值为16px，且宽⾼⽐为3:5的例⼦：
.r-card[data-v-4921f03c]{
position: relative;
width:calc((100% - 48px) / 4); //48的计算⽅式为：间隔16px * 3
min-width: 220px;
height: 0;
padding-bottom:calc((100% - 48px) / 4 * (5 / 3));
text-align: center;
margin-top: 24px;
margin-right: 16px; //选择最后⼀个元素设置margin-right：0
border: 1px solid #eeeeee;
}
效果如下：
其实，最简单的⽅法是在元素的外层包裹⼀层div，这样直接控制div宽度百分⽐即可，⽽⼦元素的成为了div的⼦元素，可随意控制。若是多⾏，div的⽗级别忘了设置align-conten属性哦~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。