css flex-wrap: wrap 排版問題
我在想????是不是有更好的flex語法????

以前都用nowrap沒發現問題?如何做的像grid
html {
font-size: 62.5%;
overflow-x: hidden;
}
display: grid;
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));

以下用 flex-wrap: wrap,不管
flex: 1 1 320px;
max-width: 30%;

        0不放大就不會填充滿空間,1的話最後一個可能是?最大寬度佔滿一格,不好看,1在RWD,版面實在不好看.....
        我在想????是不是有更好的flex語法????

  * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .flex {
        display: flex;
        align-items: stretch;
        color: black;
        gap: 15px;
        flex-wrap: wrap;
        padding: 0 9%;
        background-color: aquamarine;
    }

    .box {
        padding: 20px;
        background-color: brown;
        color: black;
        flex:  1 1 320px;
        max-width: 30%;
        overflow: hidden;

    }

    @media(max-width: 767px) {
        .box {
            max-width: 100%;
        }
    }
    
     div class="flex">
    div class="box">1</div>
    div class="box">2</div>
    div class="box">3</div>
    div class="box">4</div>