• flex等份布局实现自动换行


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            * {
                    box-sizing: border-box;
                }
            .cards {
                width: 100%;
                display: flex;
                /* Put a card in the next row when previous cards take all width */
                flex-wrap: wrap;
                margin-left: -8px;
                margin-right: -8px;
                margin-bottom: -8px;
                margin-top: 7px;
            }
    
            .cards__item {
                /* There will be 4 cards per row */
                flex-basis: 25%;
                padding-left: 8px;
                padding-right: 8px;
                margin-bottom: 16px;
            }
            .cards__item div{
                height: 80px;
                background: #ccc;
            }
            .box{
                    align-items: center;
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    justify-content: center;
                    padding: 8px;
                    width: 839px;
                    margin: 0 auto;
                    background-color: antiquewhite;
                }
        </style>
    </head>
    <body>
        <div class="box">
        <div class="cards">
            <!-- A card with given width -->
            <div class="cards__item">
                <div></div>
            </div>
            <div class="cards__item">
                <div></div>
            </div>
            <div class="cards__item">
                <div></div>
            </div>
            <div class="cards__item">
                <div></div>
            </div>
            <div class="cards__item">
                <div></div>
            </div>
            <div class="cards__item">
                <div></div>
            </div>
            <div class="cards__item">
                <div></div>
            </div>
            <div class="cards__item">
                <div></div>
            </div>
            <div class="cards__item">
                <div></div>
            </div>
            <!-- Repeat other cards -->
        </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    我的作业
    代码练习
    prority_queue 的用法 实例
    最短路问题专题
    键值对 Intent
    P103 任意两点之间的最短路问题 Floyd_warshall算法
    第6届山东省ACM省赛总结
    HDU 3247 Resource Archiver[AC自动机+最短路+dp]
    POJ 2778 DNA Sequence [AC自动机 + 矩阵快速幂]
    HDU 2896 病毒侵袭 [AC自动机]
  • 原文地址:https://www.cnblogs.com/h5it/p/15261068.html
Copyright © 2020-2023  润新知