一个DIV宽度和高度都固定的前提下，如何实现内部元素等分且换行的情况？

例如外层div，width：600px；height：300px，然后内部div有从1-10个不等，如何实现居中，等分，换行等。1-5个Div时只有一行，且等分居中，6-10个div时就另起一行，上下两行都这样如何做？

    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

你试一下

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .da {
            width: 600px;
            height: 300px;
            background-color: #ccc;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .qa {
            width: 20%;
            height: 100px;
            background-color: #fff;
            border: 1px solid #999;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="da">
        <div class="qa"></div>
        <div class="qa"></div>
        <div class="qa"></div>
        <div class="qa"></div>
        <div class="qa"></div>
        <div class="qa"></div>
        <div class="qa"></div>
        <div class="qa"></div>
        <div class="qa"></div>
        <div class="qa"></div>
    </div>
</body>

</html>

 

display: flex 可以等份；flex-wrap: wrap; 可以换行。

或者 display: grid; grid-template-columns: repeat(3,30%);自己分