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

  • 相关阅读:
    136. Single Number
    125. Valid Palindrome
    122. Best Time to Buy and Sell Stock II
    121. Best Time to Buy and Sell Stock
    119. Pascal's Triangle II
    118. Pascal's Triangle
    集中式架构与分布式架构比较-copy
    分布式id产生-copy
    MySQL 5.7数据库参数优化-copy
    23个适合Java开发者的大数据工具和框架-copy
  • 原文地址:https://www.cnblogs.com/h5it/p/15261068.html
Copyright © 2020-2023  润新知