前言:上一篇文章学了flex的用法,用法学是学了,但是毕竟实践是检验学习的标准,下面开始flex实------骰子🎲。
我们怎么用flex布局去实现上图中的骰子的六面呢?可以通过codeopen查看demo。
每一面骰子的html部分
// 第一面的xxxx代表first,第二面的xxxx代表second,依次类推
<div class="xxxx-face">
<div class="dot"></div>
</div>
我们先定义下类名为xxxx-face代表的是容器盒子,类名为dot代表盒子下面的项目。
首先把骰子的容器的公共样式写出来,如下
[class$="face"] {
width: 85px;
height: 85px;
border-radius: 10px;
background-color: #e7e7e7;
box-shadow: inset 0 3px #fff, // 上内阴影
inset 0 -3px #d7d7d7, // 下内阴影
inset 3px 0 #d7d7d7, // 左内阴影
inset -3px 0 #d7d7d7; // 右内阴影
padding: 6px;
margin-right: 20px;
}
即下图所示
骰子里面点数的样式如下
.dot {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #333;
box-shadow:
inset 0 3px #111,
inset 0 -3px #555;
}
放入点数如下图所示:
骰子的第一面
先写html部分
<div class="first-face">
<div class="dot"></div>
</div>
下面我们怎么让项目水平垂直居中呢? 首先我们先设置项目水平居中
.first-face {
display: flex;
justify-content: center
}
我们再设置垂直居中
.first-face {
display: flex;
justify-content: center;
align-items: center;
}
然后成功得到了第一面骰子
第二面骰子
html部分如下
<div class="second-face">
<div class="dot"></div>
<div class="dot"></div>
</div>
css如下
.second-face {
display: flex;
flex-direction: row;
justify-content: space-between;
}
然后设置第二个项目靠近右下方
.second-face .dot:nth-child(2) {
align-self: flex-end;
}
第三面
html如下
<div class="third-face">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
css如下:
先把主轴方向设置为竖轴,然后三个项目中间距离相同的靠近两端
.third-face {
display: flex;
flex-direction: column;
justify-content: space-between;
}
设置第二个项目水平居中
.third-face .dot:nth-child(2) {
align-self: center;
}
设置第三个项目水平靠右
.third-face .dot:nth-child(3) {
align-self: flex-end;
}
第四面
因为有四个项目,我们来进行分组实现
html如下
<div class="fourth-face">
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
css如下
.fourth-face {
display: flex;
justify-content: space-between;
}
我们需要把column里面的项目向上下两端靠近
.fourth-face .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
第五面
html如下
<div class="fifth-face">
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="column">
<div class="dot"></div>
</div>
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
css如下
.fifth-face {
display: flex;
justify-content: space-between;
}
把column里面的项目向上下两端靠近
.fifth-face .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
设置的第二个cloumn里面的项目按照主轴居中
.fifth-face .column:nth-child(2) {
justify-content: center;
}
第六面
其实这个和第四面原理是一样,都是分成两组。
html如下
<div class="sixth-face">
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
写成less如下
.sixth-face {
display: flex;
justify-content: space-between;
.column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
结语: 大家一起学习叭,如果有问题,欢迎指出,一起进步呀
参考文档
Flex 布局教程:实例篇(www.ruanyifeng.com/blog/2015/0…)