flex设定每行的元素个数，且元素有间隔的小

• 最简单的方法在最后，可拖至最后查看
• 若是设置每行显示的个数，则设置子元素的宽度即可，如每行显示三个：则父元素display：flex；flex-wrap: wrap;align-content: flex-start；子元素：flex：1；width：33.3%； ，这样每个元素占1/3，也就是每行展示三个。
• 但元素之间需要有间隔呢，也就是需要设置margin值，那我们就需请出css中calc()函数来计算子元素的宽度。

  • 具体计算方式为：( 行总宽度 - (总margin boder) ) / 个数

  • 注意 - 号的前后空格

  • 如下图就是每行显示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属性哦~

这篇好文章是转载于：学新通技术网