flex布局，一行内显示4个元素，超出4个换行，右间距设置

2023-06-17 06:59| 来源: 网络整理| 查看: 265

最终实现的效果如下：

1、HTML代码自然月合同量 54.3772 自然月剩余合同量 54.3772 自然月剩余合同日均量 54.3772 结算月合同量 54.3772 结算月剩余合同量 54.3772 结算月剩余合同日均量 54.3772 智能填报规则名称 54.3772 2、CSS样式代码（1）父元素CSS：

.volume-wrapper {

display: flex; /* flex布局 */

justify-content: flex-start; /* 左对齐 */

flex-wrap: wrap; /* 换行 */

}

（2）子元素CSS：

.volume-item{

margin-right: 20px; /* 每个元素右间距设置为20px */

/* 计算每个元素的宽度：20px是前三个元素的间距（margin-right）和，除以4即为每个元素的宽度 */

width: calc((100% - 20px) / 4);

}

/* 将下标是4的倍数元素的margin-right设置为0，即将每行最后一个元素的margin-right置0 */

.volume-item:nth-of-type(4n+0) {

margin-right: 0;

}

【本文地址】

公司简介

联系我们