--- theme: fancy highlight: atom-one-light --- 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，[点击查看活动详情](https://juejin.cn/post/7099702781094674468 "https://juejin.cn/post/7099702781094674468") > Hi~，我是[一碗周](https://juejin.cn/user/3350967174838701/posts "https://juejin.cn/user/3350967174838701/posts")，如果写的文章有幸可以得到你的青睐，万分有幸~ ## 🫐 写在前面面试中经常会被问道前端布局的实现，最典型的就是使用Flex实现色子的布局，这篇文章会逐步的介绍如何使用Flex实现色子的各个点数的布局。 ## 🍊 复习一下Flex布局属性在实现色子布局之前，我们先来复习一下这几个Flex布局的属性： * `justify-content`：用于调整元素在主轴的对其方式； `align-items`：用于调整元素在侧轴的对其方式； `align-self`：设置元素自身在侧轴的对齐方式； `flex-direction`：定义主轴是水平还是垂直或者正反方向。多说无益，我们直接来写代码 ## 🍉 实现一点布局实现一点布局就非常简单了，可以说就是一个水平垂直居中，用flex布局实现相当的容易，实现代码如下： `html` ```html

``` `css` ```css ``` > 这里只贴出核心代码，剩余代码就是一些样式样的调整。实现效果如下： ![image_6SRYiMRPxE.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b61dbf085cfe4108847420ca6bfeabfd~tplv-k3u1fbpfcp-watermark.image?) 这里我们用到了`justify-content`和`align-items`，就轻松的实现了色子的一点布局。 ## 🍋 实现二点布局现在我们实现色子的二点布局，实现代码如下： `html` ```html

``` `css` ```css ``` > 这仅仅是实现的一种方案，还有别的写法。 ![image_0D19T4Zbd4.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9cfbe3b879ca44c6bdce76da9a8a6e66~tplv-k3u1fbpfcp-watermark.image?) ## 🍌 实现三点布局三点布局与二点布局类似，只需要再添加一行即可，实现代码如下： `html` ```html

``` `css` ```css ``` 运行效果如下： ![image_3xXV-vBU1E.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ec5ccd372af44ae98fbfc75a689c64c~tplv-k3u1fbpfcp-watermark.image?) ## 🍍 实现四点布局四点布局可以说是二点布局的变种，实现代码如下： `html` ```html

``` `css` ```css .warp { display: flex; flex-direction: column; justify-content: space-between; } .column { display: flex; justify-content: space-between; } ``` 运行效果如下： ![image_m2X4k6rOZi.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb0b3445b69a4f429b8752be5521ca4e~tplv-k3u1fbpfcp-watermark.image?) ## 🥭 实现五点布局实现五点布局可以在四点布局的基础上增加一行，示例代码如下： `html` ```html

``` `css` ```css .warp { display: flex; flex-direction: column; justify-content: space-between; } .column { display: flex; justify-content: space-between; } .column:nth-child(2) { justify-content: center; } ``` 运行效果如下： ![image_z55Kd0yIBf.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1ebabc224db43ffaa4fb846c0503b4a~tplv-k3u1fbpfcp-watermark.image?) ## 🥭 实现六点布局实现六点布局可以在四点布局的基础上增加一行，示例代码如下： `html` ```html

``` `css` ```css .warp { display: flex; flex-direction: column; justify-content: space-between; } .column { display: flex; justify-content: space-around; } ``` 运行效果如下： ![image_KVv7Dm5VcC.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ad94bf1044a4d5a9d18c435b023fee8~tplv-k3u1fbpfcp-watermark.image?) ## 🍎 写在最后几乎任何布局方式都可以采用flex实现，熟练后即可flex一把梭，香的很\~