flex实现1-6骰子布局

<style>
    * {
    
        margin: 0;
        padding: 0;
    }
    
    .wrap {
    
        display: flex;
    }
    
    .box {
    
        display: flex;
        width: 100px;
        height: 100px;
        border-radius: 10px;
        border: 1px solid black;
        margin: 30px;
    }
    
    .poi {
    
        width: 30px;
        height: 30px;
        background-color: black;
        border-radius: 100%;
    }
    
    .one {
    
        justify-content: center;
        align-items: center;
    }
    
    .two {
    
        justify-content: space-around;
        align-items: center;
    }
    
    .three {
    
        justify-content: space-around;
        align-items: center;
    }
    
    .three div:first-child {
    
        align-self: flex-start;
    }
    
    .three div:last-child {
    
        align-self: flex-end;
    }
    
    .four div {
    
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
    }
    
    .five div,
    .six div,
    .six2 div {
    
        display: flex;
        flex-wrap: wrap;
        justify-content