完美解决 flex 实现一行三个，显示多行，左对齐

效果图

在这里插入图片描述

代码

<body>
    <section class="content">
        <div class="item">元素div>
        <div class="item">元素div>
        <div class="item">元素div>
        <div class="item">元素div>
        <div class="item">元素div>
        <div class="item">元素div>
        <div class="item">元素div>
    section>
body>
<style>
    .content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        background-color: skyblue;
    }
    .item {
        flex: 0 0 calc((100% - 10px)/3);
        height: 120px;
        background-color: pink;
        /* 间隙为5px */
        margin: 0 5px 5px 0;
    }
    .item:nth-child(3n) {
        /* 去除第3n个的margin-right */
        margin-right: 0;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

方法二

.item {
    /* flex: 0 0 calc((100% - 10px)/3); */
    width: calc((100% - 10px) / 3);
    height: 120px;
    background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
}
1
2
3
4
5
6
7
8

相关阅读:
如何使用plink进行二分类性状的GWAS分析并计算PRS得分
K8S：HPA pod水平自动伸缩
模态对话框和非模态对话框
使用ffmpeg调用电脑自带的摄像头和扬声器录制音视频
Python中跨越多个文件使用全局变量
Nature 哈佛新型超材料Metafluid粘度、透明度、弹性可变，可用于编程液压机器人
您遇到过网页抓取时被封IP的情况吗？
抠图专题1：抠出白色陶瓷杯（每天一个PS小项目）
通信缓冲数据ModBusRTU
css实现波浪纹

原文地址：https://blog.csdn.net/weixin_47124112/article/details/133644399