CSS 使用 Flex 布局来制作一个骰子
2017-03-02 本文已影响199人
Nian糕
Unsplash
我在上一篇博文 CSS 布局_2 Flex弹性盒中，对 Flex 弹性盒有着详细的介绍，在这里，我们使用 Flex 弹性盒布局，来实现骰子的布局，一个面可以设置 9 个点数，但在这里我只列出了点数 1-6 的布局方式，剩余点数的布局大家可以自行尝试
在下面的代码中，我使用了 div 元素来表示骰子的一个面，使用 span 来代表一个点，只是简单的使用了一些 CSS 样式，读者可按自身喜好来设置其他 CSS 样式，我在下面使用到了 border-radius 属性，这是属于 CSS 3 的属性，用来设置边框圆角，即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响， border-radius 是简写属性，是用来设置左上角 border-top-left-radius，右上角 border-top-right-radius，右下角 border-bottom-right-radius，左下角 border-bottom-left-radius 这四个值的，顺序记得不要弄错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex骰子</title>
<style type="text/css">
.box {
padding: 12px;
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 8px;
margin-bottom: 10px;
display: flex;
}
span {
width: 30px;
height: 30px;
background-color: black;
border-radius: 15px;
}
.box1 {
justify-content:center;
align-items:center;
}
</style>
</head>
<body>
<div class="box box1">
<span class="item1"></span>
</div>
</body>
</html>
点数 1
.box2 {
justify-content:space-between;
}
.box2 .item2 {
align-self:flex-end;
}
<div class="box box2">
<span></span>
<span class="item2"></span>
</div>
点数 2
.box3 {
justify-content:space-between;
}
.box3 .item2 {
align-self:center;
}
.box3 .item3 {
align-self:flex-end;
}
<div class="box box3">
<!-- 快捷键为 span.item$*3 -->
<span class="item1"></span>
<span class="item2"></span>
<span class="item3"></span>
</div>
点数 3
.box4 {
flex-direction:column;
justify-content:space-between;
}
.box4 div {
display: flex;
justify-content:space-between;
}
<div class="box box4">
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</div>
点数 4
.box5 {
flex-direction:column;
justify-content:space-between;
}
.box5 div {
display: flex;
justify-content:space-between;
}
.box5 .column {
justify-content:center;
}
<div class="box box5">
<div>
<span></span>
<span></span>
</div>
<div class="column">
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</div>
点数 5
.box6 {
justify-content:space-between;
}
.box6 div {
display: flex;
flex-direction: column;
justify-content:space-between;
}
<div class="box box6">
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
点数 6
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
