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

最新推荐文章于 2024-09-05 23:16:36 发布

原创最新推荐文章于 2024-09-05 23:16:36 发布 · 1.4w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何利用CSS的Flexbox布局和calc()函数来实现响应式设计，确保元素每行按指定数量显示并保持间距。通过设置父元素的display属性、flex-wrap、align-content以及子元素的flex、width和margin，可以精确控制元素的排列和间距。特别是当需要动态调整元素间的margin时，calc()函数能帮助计算元素的实际宽度，以适应不同的间隔需求。这种方法适用于创建多行展示且元素数量固定的布局场景。

最简单的方法在最后，可拖至最后查看
若是设置每行显示的个数，则设置子元素的宽度即可，如每行显示三个：则父元素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;
}