---
tags: CSS
---

# CSS｜flexbox｜彈性盒子｜基本觀念

* CSS3 彈性盒子，又稱flexbox。
* 不用 floats 的彈性盒子模型會比塊狀模型（block model）易用。
* 彈性容器的邊緣也不會與內容的邊緣重疊。

---

**在彈性盒子的世界，方向皆依附於主軸（main axis）與切軸（cross axis）。**

( 請參考下面的圖。)

---

**如果 flex-direction 是 column，主軸就會充當垂直、而切軸則充當水平。**

( 請參考下面的圖。)


---

**flexbox 必要元素**
`display: flex;` 或 `display: inline-flex;`

* flex 值會讓彈性容器變成塊級元素（block-level element）
* inline-flex 則會讓彈性容器成為單一的行內元素（atomic inline-level element）。

---

**flex-wrap**
設定當元素超出容器時該怎麼顯示

flex-wrap: 
* nowrap （超出空間時不換行。）
* wrap （當容器空間不夠顯示時會換行。）
* wrap-reverse （反轉副軸，主軸從左至右，副軸由下至上。）

 

**order**
容器內的箱子排序順序，flexbox有提供一個屬性為order，每個item預設的order為 0，依照大小排列。

#box1 {
  order: 1;
}

#box2 {
  order: 2;
}

 

**justify-content**
設置容器內的箱子如何依據主軸對齊。

(以下列舉部分屬性)

justify-content: 
* flex-start （從行首起始位置開始排列。）
* flex-end （從行尾位置開始排列。）
* center （居中排列。）
* space-around （均勻排列每個元素，每個元素周圍分配相同的空間。）
* space-between （左右兩旁箱子貼齊容器，中間箱子均分空間。）
* space-evenly （均勻排列每個元素，每個元素之間的間隔相等。）

實用外部連結範例介紹：[justify-content 屬性介紹](https://w3c.hexschool.com/flexbox/4a029043)

 

**align-items**
align-items可以讓我們設置容器內的箱子如何根據副軸對齊。

(以下列舉部分屬性)

align-items:
* stretch (預設值，將內容元素撐開至 flexbox 大小)
* flex-start (對齊交錯軸線最前端。)
* flex-end（對齊交錯軸線最末端）
* center （對齊交錯軸線中央。）
* baseline （對齊內容物的基線。）

實用外部連結範例介紹：[align-items 屬性介紹](https://w3c.hexschool.com/flexbox/87d66dc4)

 

**align-content**
效果與align-items類似，但適用於多行元素。

(以下列舉部分屬性)

align-content: 
* flex-start（每行貼齊交錯軸線最前端）
* flex-end（每行貼齊交錯軸線最末端）
* stretch（每行內容元素全部撐開至 flexbox 大小）
* space-between（第一行與最後一行分別對齊交錯軸線最前端與最末端）
* space-around（每行平均分配每行間距）

實用外部連結範例介紹：[align-content 屬性介紹](https://w3c.hexschool.com/flexbox/d0e569ef)

 

**align-self**
可設定各別箱子元素對於副軸的對齊方式。

(以下列舉部分屬性)

align-self: 
* flex-start（對齊交錯軸線最前端）
* flex-end（對齊交錯軸線最末端）
* center（對齊交錯軸線最中央）
* baseline（對齊內容物的基線）
* stretch（將內容元素撐開至 flexbox 大小）

實用外部連結範例介紹：[align-self 屬性介紹](https://w3c.hexschool.com/flexbox/c3847835)

---

## Flex 空間分配 flex-grow / flex-shrink / flex-basis

這裡讓我們舉個範例，預設值如下：
container 寬度爲 1000px，每個 box 寬度爲 100px，剩餘區域爲 700px。


 

## flex-grow
設定 (class: box1) 粉色盒子 flex-grow:1; ，表示剩餘空間 700px，分爲 1 份，皆分配給粉色盒子，則粉色盒子寬度爲 100px+700px=800px。


 

接著將藍色盒子也設定 flex-grow:1; ，表示剩餘空間 700px，分爲 2 份，分配給粉色盒子及藍色盒子各一份，各分 350px，粉色盒子及藍色色盒子寬度皆爲 100px+350px=450px。


 

若 container 寬度改爲比例，例如 100% ，隨著寬度縮放，剩餘空間則按造設定比例分配。


 

## flex-shrink

flex-shrink 是 flex-grow 的反向。

> 當 container 有不夠空間的時候，flex-shrink 表示壓縮比例。
> 預設值爲 1，表示大家被壓縮的比例相等。

以下舉例：

container 寬度改為 500 px，每個 box 寬度改為 200px，總共 600px，超出 container 寬度。

則每個盒子因爲 flex-shrink 預設爲 1 的關係，不夠的空間分均分壓縮三個盒子。


 

接著試試看把盒子皆設定 flex-shrink 爲 0，不要有任何壓縮，則三個盒子會爆出 container ，這也是 flex 爲了預防爆版，預設值爲 1 的用意。


 

接著試試看粉色盒子 flex-shrink 爲 1，其他盒子爲 0，則不夠的部分只會壓縮粉色盒子，效果如下：


### flex-basis

flex-basis 預設值爲 auto，表示其預設分配到的空間，與 width 很像，但優先程度較高。

container 寬度維持 1000px，每個 box 寬度爲 100px。將粉色盒子加上 flex-basis: 400px，則 flex-basis 會覆蓋 width。


 

以上三個值可縮寫在一起，順序爲flex-grow | flex-shrink | flex-basis

`flex: 1;` 相當於 `flex: 1 1 0;`

/* 縮寫意思如下 */

flex-grow : 1;
flex-shrink : 1;
flex-basis : 0;

 

---

好文章推推：
* [HTML - 網頁排版超強神器，CSS Flex到底是什麼？](https://ithelp.ithome.com.tw/articles/10267398)
* [对齐弹性容器中的弹性项目](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)

---

參考資料：
* [HTML - 網頁排版超強神器，CSS Flex到底是什麼？](https://ithelp.ithome.com.tw/articles/10267398)
* [CSS彈性盒子用法 | MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
* [Learn Flexbox in 15 Minutes](https://www.youtube.com/watch?v=fYq5PXgSsbE)
* [Flex 教學](https://www.webtech.tw/info.php?tid=36)
* [CSS Flexbox 新手入門教學 — 基礎語法&觀念](https://motea927.medium.com/css-flexbox-%E6%96%B0%E6%89%8B%E5%85%A5%E9%96%80%E6%95%99%E5%AD%B8-5ad3502e4f40)
* [justify-content | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content)
* [align-items 屬性介紹｜六角學院](https://w3c.hexschool.com/flexbox/87d66dc4)
* [Day24 Flex 空間分配 flex-grow / flex-shrink / flex-basis](https://ithelp.ithome.com.tw/articles/10208741)
* [What does flex: 1 mean?](https://stackoverflow.com/questions/37386244/what-does-flex-1-mean)

---

###### tags: `CSS` `flexbox` `彈性盒子`