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

flex等份布局实现自动换行-风君雪科技博客