利用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查看