justify-content: space-between;
flex-direction: column;
}
.face-04 .column {
display: flex;
justify-content: space-between;
}
<section name="04" class="face-04">
<div class="column">
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="column">
<span class="dot"></span>
<span class="dot"></span>
</div>
</section>
本例中使用了flex-direction，从字面意思可以看出，是用来控制flex的方向，即按列还是按行来布局，该属性更详细的用法可以参考这里flex-direction
后面Fifth Face 和 Sixth Face,根据前面的布局思想，就很easy了不再赘述！
写到此，想想配合JS写一个玩骰子的小游戏应该很easy了吧。
五、实现1,2,3,4,6,12等份
CSS Code复制内容到剪贴板
.row {
display: flex;
box-sizing: border-box;
}
.column {
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
box-sizing: border-box;
}
<section class="row">
<div class="column">One</div>
</section>
<section class="row">
<div class="column">One Half</div>
<div class="column">One Half</div>
</section>
<section class="row">
<div class="column">One Third</div>
<div class="column">One Third</div>
<div class="column">One Third</div>
</section>
<section class="row">
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
