利用flexbox画骰子

原文链接

flexbox很强大，能够轻松实现各种布局，看完这篇博客顿时觉得有趣又厉害。PS:笔者是按照原文部分翻译。

先从HTML开始。

<div class="first-face">  <span class="pip"></span></div>

为了看起来更生动，我为每面和点子都加了基本样式，看起来像这样：

pic-1

说到这里我先跟原文不一样先插入一段定义骰子总体样式的CSS代码：

[class$="face"] {  margin: 16px;  padding: 4px;    background-color: #e7e7e7;  width: 104px;  height: 104px;  object-fit: contain;    box-shadow:    inset 0 5px white,     inset 0 -5px #bbb,    inset 5px 0 #d7d7d7,     inset -5px 0 #d7d7d7;    border-radius: 10%;}.pip {  display: block;  width: 24px;  height: 24px;  border-radius: 50%;  margin: 4px;  background-color: #333;  box-shadow: inset 0 3px #111, inset 0 -3px #555;}

第一步就是告诉浏览器把面变成一个flexbox容器：

.first-face {  display: flex;}

这样看起来图并没有什么变化，图如 pic-1。然而这才开始。

first-face这个容器现在有一条水平主轴，一个flexbox容器的主轴可以是水平的或者竖直的，默认的是水平的，所以如果我们吧另外一个点加进来，它就会出现在第一个点的右边。flexbox中还有cross轴，cross轴总是垂直于主轴的。

justify-content 属性定义沿着主轴对齐。因此我们要点沿着面的主轴出现在中间，我们用center值表示就行了。

.first-face {  display: flex;  justify-content: center;}

很酷有木有，点就这样居中了。

align-items 属性就是定义目标沿着cross轴怎么分布了，赶紧...

.first-face {  display: flex;  justify-content: center;  align-items: center;}

----------------------------------------------------------------------分---------------割---------------------线-----------------------------------------------------------------------------------------------------------------

愈来愈棘手了哦

两个点的面

<div class="second-face">  <span class="pip"></span>  <span class="pip"></span></div>

（图片脑补吧，左上角挨着对齐- -）

.second-face {  display: flex;}

我们得让两个点正对着对方对立排好。justify-content 属性的值为 space-between 就可以把俩点分开啦

.second-face {  display: flex;  justify-content: space-between;}

问题来了，直接用align-items会影响两个点。但是 flexbox 支持 align-self 属性。允许我们把对象单独拎出来沿着cross轴随意摆弄。

.second-face {  display: flex;  justify-content: space-between;}.second-face .pip:nth-of-type(2) {  align-self: flex-end;}

看着不错吧！

水平和垂直嵌套

让我们跳过第三面和解决第四面，这个便相对来说更棘手了（2×2分布啦）

我们可以利用这两点：flex容器可以有垂直或水平的内容,并且flex容器可以嵌套。

<div class="fourth-face">  <div class="column">    <span class="pip"></span>    <span class="pip"></span>  </div>  <div class="column">    <span class="pip"></span>    <span class="pip"></span>  </div></div>

我们想让两列分居两边，我们便像之前一样利用 “justify-content: space-between”

.fourth-face {  display: flex;  justify-content: space-between;}

接下来，我们要把列变成flex容器。我们给它设置 display: flex 。我们可以利用 flex-direction 属性设置列的主轴方向。

.fourth-face {  display: flex;  justify-content: space-between;}.fourth-face .column {  display: flex;  flex-direction: column;}

图片如上图看着未发生什么改变。但是 列 现在是个 flex 容器啦，注意到我是怎样把一个flex容器卡在另一个flex容器里面的吧

最后要把每列里面的点彼此分开，由于主轴是垂直的，我们就再用一次 justify-content

.fourth-face {  display: flex;  justify-content: space-between;}.fourth-face .column {  display: flex;  flex-direction: column;  justify-content: space-between;}

完结了

接下来你们肯定能把剩下的三个面完成啦。把所有的面都放在一个flexbox容器里：

在codepen查看