麻将应该很多人都熟悉吧，那如何通过flex布局尽可能使用少的节点来实现“三饼（也有人管它叫桶）”的效果呢？（ps:麻将牌效果如下）

实现步骤：

1.首先先通过flex修饰外层容器，内部的三个节点分别代表三个大饼。

2.通过设置justify-content: space-between;使得三个饼能够均分区域并排列。

3.对三个饼依次设置align-self为self-start、center、self-end来实现垂直均分。

具体代码如下：

html部分：

<div class="testPage"><div class="point part1"></div><div class="point part2"></div><div class="point part3"></div>
</div>

css部分：

.testPage {width: 120px;height: 170px;border: 1px solid black;border-radius: 2px;display: flex;flex-direction: column;justify-content: space-between;padding: 20px;}
.point {width: 50px;height: 50px;border-radius: 50%;}
.part1 {width: 50px;height: 50px;background-color: rgb(28, 77, 156);align-self: self-start;}
.part2 {width: 50px;height: 50px;background-color: rgb(211, 19, 36);align-self: center;}
.part3 {width: 50px;height: 50px;background-color: rgb(29, 152, 53);align-self: self-end;}

实现效果：

总之，学习css是一个长期积累的过程，积硅步方可至千里。

希望本文会对您有所帮助 ^_^