flex平均分布并换行

作者: 清霆 | 来源:发表于2020-11-25 17:08 被阅读0次

flex平均分布并换行
flex 平均分布换行对齐文件管理器宫格布局
flex 布局平均分布又可以换行
flex布局平均分布又可以换行
HTML
CSS flex布局中flex container的主要属性总结
flex布局
css
CSS/javaScript 学习记录
CSS3弹性盒模型01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="uft-8" />
        <title>flex弹性布局</title>
        <style>
            .list {
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
            }
            .list:after {
                content: ' ';
                flex: auto;
            }
            .item {
                height: 100px;
                background-color: #1890ff;
                margin-bottom: 10px;
            }
            .list .item {
                margin-right: 10px;
                width: calc((100vw - 10px * 4) / 5);
            }
            .list .item:nth-child(5n) {
                margin-right: 0;
            }
            
            /* 
            $i: 5;
            $marginRight: 10px;
            .list .item {
                margin-right: #{$marginRight};
                width: calc((100vw - #{$marginRight} * (#{$i}-1)) / #{$i});
            }
            .list .item:nth-child(#{$i}n) {
                margin-right: 0;
            }
            */
        </style>
    </head>
    <body>
        <div class="list">
            <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 class="item">12</div>
            <div class="item">13</div>
        </div>
    </body>
</html>