面試官讓我用Flex寫色子佈局，我直接給寫了6個

---

theme: fancy highlight: atom-one-light

---

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第23天，點擊查看活動詳情

Hi~，我是一碗周，如果寫的文章有幸可以得到你的青睞，萬分有幸~

🫐 寫在前面

面試中經常會被問道前端佈局的實現，最典型的就是使用Flex實現色子的佈局，這篇文章會逐步的介紹如何使用Flex實現色子的各個點數的佈局。

🍊 複習一下Flex佈局屬性

在實現色子佈局之前，我們先來複習一下這幾個Flex佈局的屬性：

• justify-content：用於調整元素在主軸的對其方式；

align-items：用於調整元素在側軸的對其方式；

align-self：設置元素自身在側軸的對齊方式；

flex-direction：定義主軸是水平還是垂直或者正反方向。

多説無益，我們直接來寫代碼

🍉 實現一點佈局

實現一點佈局就非常簡單了，可以説就是一個水平垂直居中 ，用flex佈局實現相當的容易，實現代碼如下：

html

```html

```

css

```css

```

這裏只貼出核心代碼，剩餘代碼就是一些樣式樣的調整。

實現效果如下：

這裏我們用到了justify-content和align-items，就輕鬆的實現了色子的一點佈局。

🍋 實現二點佈局

現在我們實現色子的二點佈局，實現代碼如下：

html

```html

```

css

```css

```

這僅僅是實現的一種方案，還有別的寫法。

🍌 實現三點佈局

三點佈局與二點佈局類似，只需要再添加一行即可，實現代碼如下：

html

```html

```

css

```css

```

運行效果如下：

🍍 實現四點佈局

四點佈局可以説是二點佈局的變種，實現代碼如下：

html

```html

```

css

css .warp { display: flex; flex-direction: column; justify-content: space-between; } .column { display: flex; justify-content: space-between; }

運行效果如下：

🥭 實現五點佈局

實現五點佈局可以在四點佈局的基礎上增加一行，示例代碼如下：

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; }

運行效果如下：

🥭 實現六點佈局

實現六點佈局可以在四點佈局的基礎上增加一行，示例代碼如下：

html

```html

```

css

css .warp { display: flex; flex-direction: column; justify-content: space-between; } .column { display: flex; justify-content: space-around; }

運行效果如下：

🍎 寫在最後

幾乎任何佈局方式都可以採用flex實現，熟練後即可flex一把梭，香的很\~