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

語言: CN / TW / HK

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

```

這裡只貼出核心程式碼,剩餘程式碼就是一些樣式樣的調整。

實現效果如下:

image_6SRYiMRPxE.png

這裡我們用到了justify-contentalign-items,就輕鬆的實現了色子的一點佈局。

🍋 實現二點佈局

現在我們實現色子的二點佈局,實現程式碼如下:

html

```html

```

css

```css

```

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

image_0D19T4Zbd4.png

🍌 實現三點佈局

三點佈局與二點佈局類似,只需要再新增一行即可,實現程式碼如下:

html

```html

```

css

```css

```

執行效果如下:

image_3xXV-vBU1E.png

🍍 實現四點佈局

四點佈局可以說是二點佈局的變種,實現程式碼如下:

html

```html

```

css

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

執行效果如下:

image_m2X4k6rOZi.png

🥭 實現五點佈局

實現五點佈局可以在四點佈局的基礎上增加一行,示例程式碼如下:

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

🥭 實現六點佈局

實現六點佈局可以在四點佈局的基礎上增加一行,示例程式碼如下:

html

```html

```

css

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

執行效果如下:

image_KVv7Dm5VcC.png

🍎 寫在最後

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