---
# System prepended metadata
title: Flex
tags: [tutorials]
---
###### 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;
}
```
* row (default): left to right in ltr; right to left in rtl
* row-reverse: right to left in ltr; left to right in rtl
* column: same as row but top to bottom
* column-reverse: same as row-reverse but bottom to top
---
* **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;
}
```
* nowrap (default): all flex items will be on one line
* wrap: flex items will wrap onto multiple lines, from top to bottom.
* wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
---
* **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.
會按照以下排列↓
---
* **flex-grow**: Default is 0, the remaining space in the container will be distributed equally to all children.
```
```
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