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 (3 points)
This time draw a dice with 4 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">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</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. Default layout. By default, when a container item exceeds the container, the item is automatically reduced to fit the width of the container, and the flex-wrap:wraporiginal size of the item is restored after adding the wrap attribute.
.box {
display: flex;
}
2. Four corners
.box {
display: flex;
/* 换行 */
flex-wrap: wrap;
justify-content: space-between;
/* 多条主轴时，交叉轴对齐方式 */
align-content: space-between;
}
3. When there are 3 points in a row, as shown below:
If you want to change it to a 4-corner layout, you can modify the layout and style as follows:
<div class="box">
<div class="row">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row {
display: flex;
justify-content: space-between;
}