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

小白程序猿H

19104人浏览 · 2023-10-07 16:22:15

小白程序猿H · 2023-10-07 16:22:15 发布

效果图

在这里插入图片描述

代码

<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>

方法二

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

注意calc写法

1、错误的格式：width:calc(100%-10px);

2、正确格式：width:calc(100% - 10px);

减号左右要留有空格，咱们只管用，也不敢问这是为什么

Grid实现

在这里插入图片描述

代码

    <div class="grid">
        <div class="pink"></div>
        <div class="pink"></div>
        <div class="pink"></div>
        <div class="pink"></div>
        <div class="pink"></div>
        <div class="pink"></div>
        <div class="pink"></div>
        <div class="pink"></div>
        <div class="pink"></div>
    </div>
<style>
        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 1fr占用空间表示份数，这表示3列，每列都占1份 */
            /* grid-template-columns: 2fr 1fr 1fr; */ /* 第一列占 2 份，后两列各占 1 份（总宽度被分成 4 份） */
            grid-template-rows: repeat(3, 1fr);
            gap: 10px;
            width: 100vw;
            height: 200px;
            background-color: skyblue;
        }

        .pink {
            overflow: hidden;
    		white-space: nowrap;
            background-color: pink;
        }
    </style>