CSS layout using Flex layout to draw dice (5 points)

If you have no foundation, please read and study this document first : Ruan Yifeng Flex Layout Tutorial: Grammar

Previous article CSS layout: using Flex layout to draw dice (4 points)

This time draw a dice with 5 points. You can first look at the picture and write the code silently, and then check it with the code in the text to verify whether you understand the Flex layout.

Dice style:

<div class="box">
    <div class="row">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="row-center">
        <span class="item"></span>
    </div>
    <div class="row">
        <span class="item"></span>
        <span class="item"></span>
    </div>
</div>

.box {
    
    
	width: 100px;
    height: 100px;
    border-radius: 20px;
    padding: 10px;
    background-color: rgba(230, 230, 230, 1);
    /* 对四条边进行阴影浮雕修饰 */
    box-shadow: inset 0 5px 2px rgba(250, 250, 250, 1),
        inset 5px 0 2px rgba(215, 215, 215, 1),
        inset -5px 0 2px rgba(215, 215, 215, 1),
        inset 0 -5px 2px rgba(187, 187, 187, 1);
}
.item {
    
    
    width: 30px;
    height: 30px;
    margin: 2px;
    border-radius: 50px;
    background-color: rgba(51, 51, 51, 1);
    box-shadow: inset 0 5px 2px rgba(22, 22, 22, 1), inset 0 -5px 2px rgba(85, 85, 85, 1)
}

1. 5 point dice

.box {
    
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.row {
    
    
    display: flex;
    justify-content: space-between;
}
.row-center {
    
    
    display: flex;
    justify-content: center;
}

Next article CSS layout: using Flex layout to draw dice (6 points)