###### tags: `tutorials`
# Flex


### Flexbox properties
### flex container(Properties for the Parent)

---

## flex-container css屬性
* **display**: This defines a flex container;

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

---

* **flex-direction**: This establishes the main-axis, thus defining the direction flex items are placed in the flex container.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

* <SUB>row (default): left to right in ltr; right to left in rtl</SUB>
* <SUB>row-reverse: right to left in ltr; left to right in rtl</SUB>
* <SUB>column: same as row but top to bottom</SUB>
* <SUB>column-reverse: same as row-reverse but bottom to top</SUB>

---

* **flex-wrap**: By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

<SUB>* nowrap (default): all flex items will be on one line</SUB>
<SUB>* wrap: flex items will wrap onto multiple lines, from top to bottom.</SUB>
<SUB>* wrap-reverse: flex items will wrap onto multiple lines from bottom to top.</SUB>

---

* **flex-flow**: This is a shorthand for the flex-direction and flex-wrap properties.

.container {
  flex-flow: column wrap;
}

---

* **justify-content**: This defines the alignment along the main axis.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}


---

* **align-items**: This defines the default behavior for how flex items are laid out along the cross axis on the current line.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

* **gap, row-gap, column-gap**: The gap property explicitly controls the space between flex items.

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column-gap */
  row-gap: 10px;
  column-gap: 20px;
}


---

### flex item(Properties for the Children)

---

## flex-item css屬性

* **order**: By default, flex items are laid out in the source order.

<DIV style="color: red;">會按照以下排列↓</DIV>


---

* **flex-grow**: Default is 0, the remaining space in the container will be distributed equally to all children.

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

container 寬度爲 1000px，每個 box 寬度爲 100px。粉色綠色藍色方塊皆爲 100px，剩餘區域爲 700px。
接著設定粉色盒子 flex-grow:1; ，表示剩餘空間 700px，分爲 1 份，皆分配給粉色盒子，則粉色盒子寬度爲 800px。效果如下：
接著將綠色盒子也設定 flex-grow:1; ，表示剩餘空間 700px，分爲 2 份，分配給粉色盒子及綠色盒子各一份，各分 350px，粉色盒子及綠色盒子寬度皆爲 450px。效果如下：
若 container 寬度改爲比例，例如 100% ，隨著寬度縮放，剩餘空間不同，則被分配到的寬度也不一樣。

---

* **flex-shrink**: flex-shrink 是 flex-grow 的反向，有剩餘空間，就表示也有不夠空間的時候。flex-shrink 表示空間不夠時的壓縮比例。預設值爲 1。表示大家被壓縮的比例相同。

container 寬度維持 1000px，每個 box 寬度改爲 400px，總共 1200px，超出 container 寬度。則每個盒子因爲 flex-shrink 預設爲 1 的關係，不夠的空間分均分壓縮三個盒子。效果如下(爲了可視化 container，設置紅色框線)：
接著試試看把盒子皆設定 flex-shrink 爲 0，不要有任何壓縮，則三個盒子會爆出 container ，這也是 flex 爲了預防爆版，預設值爲 1 的用意，效果如下：
接著試試看粉色盒子 flex-shrink 爲 1，其他盒子爲 0，則不夠的部分只會壓縮粉色盒子，效果如下：

---

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

container 寬度維持 1000px，每個 box 寬度改爲 200px。將粉色盒子加上 flex-basis: 300px;，則 flex-basis 會覆蓋 width，效果如下：

---

* **flex**: This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The default is 0 1 auto. The second and third parameters (flex-shrink and flex-basis) are optional.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

---

* **align-self**: This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

## 參考資料
1. https://css-tricks.com/snippets/css/a-guide-to-flexbox/#background
2. https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
3. https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items