若无基础,请优先阅读学习此文档阮一峰 Flex 布局教程:语法篇
这次画3个点的骰子。大家可以先看图片默写代码,然后与文中代码做校验,来验证自己是否理解了Flex布局。
骰子样式:
<div class="box">
<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、正斜角
.box {
display: flex;
}
.item:nth-child(1){
align-self:flex-end;
}
.item:nth-child(2){
align-self:center;
}
2、反斜角
.box {
display: flex;
}
.item:nth-child(2){
align-self:center;
}
.item:nth-child(3){
align-self:flex-end;
}
3、横线
.box {
display: flex;
justify-content: space-between;
align-items: center;
}
4、竖线
.box {
display: flex;
flex-direction:column;
justify-content: space-between;
align-items: center;
}
5、倒三角
.box {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: center;
}
6、正三角
.box {
display: flex;
flex-wrap: wrap-reverse;
justify-content: space-evenly;
align-content: center;
}
7、侧三角
.box {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: center;
}