---
tags: Css, Flex
---
# Flex 共筆
###### tags: `css`, `flex`
> flex-grow(父級 剩餘空間 比例分配 ≧ 0)
> flex-shrink(父級 超出空間 比例分配 ≧ 0)
> flex-basis(原始尺寸、比width優先)

> flex: initial; = flex: 0 1 auto; // 初始值(剩餘空間：不可延伸、空間不足：可收縮)。
> flex: auto; = flex: 1 1 auto; // (可延伸 與 可收縮)。
> flex: none; = flex: 0 0 auto; // (不可延伸 與 不可收縮)。
> flex: 正數(不能為負); // 例：1、0.5。

> flex: 1; = 對全部子級下會導致均分寬度、針對其中一個子級下會把剩下的寬度全都配給他
> flex: 2; = flex: 2 1 0;
> flex: 3;、flex: 2;、flex: 1; = 子級比例為 3：2：1

> flex: 0 1 auto; // 初始值(剩餘空間：不可延伸、空間不足：可收縮)
> flex: 0 0 auto; // none(不可延伸 與 不可收縮)
> flex: 0 1 %; // % = content寬度(不含 pd bd)
> flex: 1 1 auto; //auto(可延伸 與 可收縮)

**.flex: 0 0 auto;**
min-width > max-width > width(若為auto min-width必須要在max-width也設定的情況下才起作用)

**.flex: 0 1 auto;**
min-width > max-width > width(若為auto max-width無效)

**.flex: 0 0 33.33%;
.flex: 0 1 33.33%;**
min-width > max-width > flex > width(padding = 0 若≠0 須設定max-width)