526互联

flex 布局之左右边距对齐，换行左对齐

发布时间 2023-09-24 16:24:15作者: 猖狂的小山猪
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .BetweenList {
            display: flex;
            flex-wrap: wrap;
        }

        .BetweenList.col2 .item {
            width: 49.5%;
            background-color: #333;
            height: 50px;
            margin-bottom: 5px;
        }

        .BetweenList.col2 .item:not(:nth-child(2n)) {
            margin-right: calc(1% / 1);
        }

        .BetweenList.col3 .item {
            width: 33%;
            background-color: #333;
            height: 50px;
            margin-bottom: 5px;
        }

        .BetweenList.col3 .item:not(:nth-child(3n)) {
            margin-right: calc(1% / 2);
        }

        .BetweenList.col4 .item {
            width: 24%;
            background-color: #333;
            height: 50px;
            margin-bottom: 5px;
        }

        .BetweenList.col4 .item:not(:nth-child(4n)) {
            margin-right: calc(4% / 3);
        }

        .BetweenList.col5 .item {
            width: 12%;
            background-color: #333;
            height: 50px;
            margin-bottom: 5px;
        }

        .BetweenList.col5 .item:not(:nth-child(8n)) {
            margin-right: calc(8% / 14);
        }

    </style>
</head>
<body>
<h2>两端对齐2列</h2>
<div class="BetweenList col2">
    <div class="item">额</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">6</div>
</div>
<hr>
<h2>两端对齐3列</h2>
<div class="BetweenList col3">
    <div class="item">额</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
<hr>
<h2>两端对齐4列</h2>
<div class="BetweenList col4">
    <div class="item">额</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
<hr>
<h2>两端对齐5列</h2>
<div class="BetweenList col5">
    <div class="item">额</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
</div>


</body>
</html>