文章中英模式

布魯斯前端面試題目 - Flexbox面試重點

深入理解CSS Flexbox佈局模型，掌握flex容器與項目的關鍵屬性，學習justify-content、align-items等對齊方式，以及flex-grow、flex-shrink等彈性分配空間的核心概念。

文章中英模式

懶得看文章？那就來看影片吧

Flex容器的關鍵屬性

建立Flex佈局的第一步是將一個元素設置為Flex容器，然後其子元素自動成為Flex項目：

.container {
  display: flex; /* 或 display: inline-flex */
}

Flex容器的主要屬性：

flex-direction

定義主軸方向，決定Flex項目的排列方向。

1. row（默認）：從左到右
2. row-reverse：從右到左
3. column：從上到下
4. column-reverse：從下到上

flex-wrap

定義Flex項目在一行排不下時是否換行。

1. nowrap（默認）：不換行
2. wrap：換行，第一行在上方
3. wrap-reverse：換行，第一行在下方

justify-content

定義Flex項目在主軸上的對齊方式。

1. flex-start（默認）：左對齊
2. flex-end：右對齊
3. center：居中對齊
4. space-between：兩端對齊，項目之間間隔相等
5. space-around：每個項目兩側的間隔相等
6. space-evenly：項目間隔均勻分布

align-items

定義Flex項目在交叉軸上的對齊方式。

1. stretch（默認）：如未設高度，將占滿整個容器高度
2. flex-start：交叉軸起點對齊
3. flex-end：交叉軸終點對齊
4. center：交叉軸居中對齊
5. baseline：項目第一行文字的基線對齊

align-content

定義多行Flex項目在交叉軸上的對齊方式（僅當flex-wrap: wrap時有效）。

1. stretch（默認）：占滿整個交叉軸
2. flex-start：交叉軸起點對齊
3. flex-end：交叉軸終點對齊
4. center：交叉軸居中對齊
5. space-between：交叉軸兩端對齊
6. space-around：每個行兩側間隔相等

gap

定義Flex項目之間的間隙。

1. gap: 10px; (設置行與列間隙相同)
2. row-gap: 10px; (設置行間隙)
3. column-gap: 20px; (設置列間隙)

視覺示例：

justify-content: space-between

Item 1

Item 2

Item 3

align-items: center

Short

Tall

Medium

flex-direction: column

Top

Middle

Bottom

Flex項目的關鍵屬性

除了容器屬性外，Flex項目也有自己的一組屬性，用於控制單個項目如何伸縮和對齊：

flex-grow

定義項目在空間剩餘時的放大比例。

默認值：0（不放大）

數值越大，占據剩餘空間比例越大

flex-shrink

定義項目在空間不足時的縮小比例。

默認值：1（空間不足時等比縮小）

數值越大，縮小比例越大；0表示不縮小

flex-basis

定義項目在伸縮前的初始大小。

默認值：auto（項目本身的大小）

可設為具體尺寸（px, %, rem等）

flex

flex-grow, flex-shrink 和 flex-basis的簡寫。

默認值：0 1 auto

flex: 1; 等同於 flex: 1 1 0%;

flex: auto; 等同於 flex: 1 1 auto;

flex: none; 等同於 flex: 0 0 auto;

align-self

允許單個項目有與其他項目不同的對齊方式，覆蓋align-items屬性。

可能的值：auto（默認）, flex-start, flex-end, center, baseline, stretch

.item {
  flex: 1; /* 均分剩餘空間 */
}

.important-item {
  flex: 2; /* 占據2倍的剩餘空間 */
}

.fixed-item {
  flex: 0 0 200px; /* 固定寬度200px，不伸縮 */
}

.special-item {
  align-self: flex-end; /* 單獨對齊到底部 */
}

🔥 常見面試題目

(一) flex: 1 代表什麼？以及flex-grow、flex-shrink和flex-basis的作用？

答：flex是flex-grow、flex-shrink和flex-basis的簡寫屬性。

flex: 1 等同於 flex: 1 1 0%，包含三個屬性：
- flex-grow: 1 - 定義項目的放大比例，表示會分配容器的剩餘空間
- flex-shrink: 1 - 定義項目的縮小比例，表示空間不足時會縮小
- flex-basis: 0% - 定義項目的基準大小，0%表示完全依賴flex-grow分配

這三個屬性的作用：

flex-grow：決定項目如何分配剩餘空間，值越大分得越多
例：兩個項目，一個flex-grow:1，另一個flex-grow:2，則後者獲得的剩餘空間是前者的兩倍
flex-shrink：決定項目如何縮小，值越大縮小得越多
例：容器寬度不足時，flex-shrink:2的項目比flex-shrink:1的項目縮小得更多
flex-basis：設置項目的初始大小
例：flex-basis:100px表示項目初始寬度為100px，再根據flex-grow和flex-shrink調整

簡單說，flex: 1使項目能夠彈性地填充容器空間，均等分配所有可用空間。

(二) 如何使用Flexbox實現垂直和水平居中？

答：使用Flexbox實現元素的完美居中是非常簡單的：

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 或者僅水平居中 */
.horizontal-center {
  display: flex;
  justify-content: center;
}

/* 或者僅垂直居中 */
.vertical-center {
  display: flex;
  align-items: center;
}

這種方法適用於各種情況，包括單行文本、多行文本、圖片或複雜元素的居中。與傳統的方法相比（如絕對定位+負margin、表格佈局等），Flexbox居中更直觀且靈活。