---
# System prepended metadata

title: flexbox佈局系統-flex-container
tags: [ALPHACampWeek2]

---

###### tags:`ALPHACampWeek2`

flexbox佈局系統-flex-container 
===
[flex測試網站](https://flexiting.com/playground/)

學習成果與目標
---
・運用 display: flex 啟動 flexbox 系統，宣告 container 和 item
・了解 flexbox 系統裡 main axis 和 cross axis 的區別，並使用 flex-direction 切換主軸線
・使用 flex-wrap 屬性決定子元素超出容器的時候要不要換行
・使用 align-items 和 justify-content 屬性調整對齊和間距

inline vs. block
---
inline不能直接更改寬高
- 如果需要調整inline 需要display:block
block可以直接更改
- 會根據內容去調整大小
- block 元件會擴展到父元件的整個寬度，而 inline 元件僅擴展到內容的尾端。

min-height
---
最小高度一定要X,沒有的話自動伸長

flex 
---
- flex-container
外層元素
- flex-item
內層元素

- flex-direction 排列的模式 直/橫
default:row
改成column可以變直的排列
flex-direction: row
flex-direction: column
flex-direction: row-reverse
flex-direction: column-reverse

- flex-wrap 是否要換行
default:no-wrap
改成wrap可以換行排列
flex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap-reverse

- flex-flow
flex-direction 和 flex-wrap 這兩個屬性可以合併成 flex-flow 屬性。
.flex-container {
    flex-flow: row wrap;
}

- justify-content 
根據主軸進行排列(flex-direction的排列方式)
default:flex-start 水平排列時會靠左
改成flex-end會靠右排列
總共可接受六個值:
flex-start (default)
flex-end
center
space-between
space-around
space-evenly
  - justify-content:space-between //預設改的是main-axis
justify-content - 用於 main axis
align-items - 用於 cross axis
space-between
左右兩邊沒空隙分散對齊
space-around
左右兩邊小空隙分散對齊
space-evenly
左右兩邊兩中間空隙一模一樣

- justify-content:align-item //預設改的是cross-axis
相對於justify-content
default:stretch
改成flex-start會靠上
flex-start
flex-end
center
baseline
- 先把內容對齊 baseline，item 隨著跑 (通常文字下緣對齊的地方稱為 baseline）
stretch (預設)
- item 會延展填滿容器空間，但會尊重特別指定的 width or height (如方塊 3)

![](https://i.imgur.com/lpNFXTj.png)

巢狀 Flexbox 與 Flex Item 
---
[Flexbo模擬網站](https://flexiting.com/playground/)
- 要使用前先宣告display:flex
會以預設方式row排版，看是否要使用column屬性旋轉屬性

- 轉化為巢狀Flexbox
接著我們來把 <section> 也改成 flex container，這樣一來，又可以進一步控制 image 和 article 區塊的排列方式。

```css=
section {
  display: flex;   
  flex-flow: row nowrap;   
}
```

- flex-basis
flex-basis - 以父元素尺寸為基礎，設定比例
- flex-grow
flex-grow - 分配剩餘空間，預設為 0 為沒有變化，設定為 1 以上的數字，就會填滿剩餘空間。
```css=
// add the code below
.image {
  flex-basis: 30%;    
}

article {
  flex-grow: 1;    
}
```
![](https://i.imgur.com/dvlAubK.png)

- order
flex item 的 order 屬性來改變排列順序。所有的 flex item 預設值為 order： 0;，表示依照 HTML 中的宣告順序而定，-1可以更換item排序
```css=
article {
  flex-grow: 1;    
  order: -1; // add this line
}
```
 
- flex-shrink
flex-shrink 是 flex-grow 的反向，有剩餘空間，就表示也有不夠空間的時候。flex-shrink 表示空間不夠時的壓縮比例。預設值爲 1。表示大家被壓縮的比例相同。
 
粉色盒子 flex-shrink 爲 1，其他盒子爲 0，則不夠的部分只會壓縮粉色盒子
![](https://i.imgur.com/VhJ5jfy.png)