面试官让我用Flex写色子布局，我直接给写了6个

🫐 写在前面

面试中经常会被问道前端布局的实现，最典型的就是使用Flex实现色子的布局，这篇文章会逐步的介绍如何使用Flex实现色子的各个点数的布局。

🍊 复习一下Flex布局属性

在实现色子布局之前，我们先来复习一下这几个Flex布局的属性：

• justify-content：用于调整元素在主轴的对其方式；

align-items：用于调整元素在侧轴的对其方式；

align-self：设置元素自身在侧轴的对齐方式；

flex-direction：定义主轴是水平还是垂直或者正反方向。

多说无益，我们直接来写代码

🍉 实现一点布局

实现一点布局就非常简单了，可以说就是一个水平垂直居中 ，用flex布局实现相当的容易，实现代码如下：

html

 
1
2

css

 
1
2

这里只贴出核心代码，剩余代码就是一些样式样的调整。

实现效果如下：

这里我们用到了justify-content和align-items，就轻松的实现了色子的一点布局。