---
# System prepended metadata

title: Flexbox
tags: [tool, CSS]

---

# Flexbox

###### tags: `CSS` `tool`

為什麼要有flexbox:
```
Ans: 為了自由運用分配剩餘的空間,而不要一直用col,div等等
```
我這邊要引用下大神的話:
> 以前很困擾的問題是，到底某屬性是下在外容器還是內元素，今天才發現其實子元素能設的有限，只有 order、align-self、flex… 大部分都是在==外容器==上操作。

要理解 flexbox 最快的還是看圖片，推薦此範例：[Codpen - handy flexbox tool](https://codepen.io/vailjoy/live/pRgYbw)，很方便連字都不用打哈哈哈

有些部分大神歸納的蠻清楚的,有時間再回來看. 

[大神的blog](https://yakimhsu.com/project/project_w6_CSS_flex.html)

## flexbox的組成:
1. flex container/ flex items

2. main axis/cross axis
   - 預設main axis是水平線,cross axis是垂直線
   - 若flex-direction:column 則情況會反過來

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

> 15天 align-content 在第5:00開始有複習所有的概念

## flex-container （在container底下下css)

### css的屬性如下

   1. flex-direction(控制走向) 比較少去動它
    - row (預設)
    - row-reverse
    - column 
    - column-reverse

   2. flex-wrap(把flex-items塞在同一行裡面) 蠻常動他的
    - nowrap (預設) 不換行
    - wrap 換行
    - wrap-reverse(不太常用)
    使用時機:三欄式版型會用到

## 對齊類
    
### justify-content 掌管左右
    
 整坨去對齊主軸(main axis)
    
 - flex-start （預設,要看原本的direction是什麼方向）
 - flex-end
 - flex-center
 - space-between （多餘的空間放在彼此之間）=>直接放左右邊際線
 - space-around   (旁邊都會塞剩餘的空間)
 - space-evenly   （等分空間）
       
    
### align-items 掌管上下
    
 每一個item去對齊cross-axis的頭
    
  - flex-start
  - flex-end
  - flex-center
  - baseline 對齊文字的底線
  - stretch 預設值,不需要再用高度撐開自己的高度,直接對container下flex, 高度就會延展成等高
    
    
### align-content  **要在有剩餘空間的狀態下才看的到效果** 在wrap(換行下)狀態下才有效果
    
  整陀去對齊cross axis的頭
    
   - flex-start
   - flex-end
   - flex-center
   - space-between
   - baseline 對齊文字的底線
   - stretch 預設值,不需要再用高度撐開自己的高度,直接對container下flex, 高度就會延展成等高
   
## flex items: (在items底下下css,像是獨立個體的設定)

1. align-self
  - auto (預設)
  - flex-start
  - flex-end
  - center
  - baseline
  - stretch

2. flex

  - grow + number 

    -  `flex-grow:0`(預設)  
    -  `flex-grow:1`(自動成長,並填滿空間) 
        1以上就是剩下的空間有多少,把最多的分配給倍數最多的items, 
        其他items自己拿一份
   
> 15天 flex 8分鐘開始有比較詳細的說明, 一般來說都是1

  - shrink + number 
  
     - `flex-shrink:1`(預設為自動縮減)但是內容多的話,還是會爆掉的.(nowrap狀況下)
     - `flex-shrink:0` 不會自動縮減,會直接爆掉(nowrap狀況下)
   
   若是在wrap的狀況底下,會直接換行
   
  - basis
      - auto (預設)
      - 百分比:20%
      - 定值:100px;
      - 5rem

實務上的用法

```css
<flex-grow><flex-shrink><flex-basis>
```

可以寫成
flex: initial
那就是預設值

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

---

可以寫成
flex: none

flex-grow:0
flex-shrink:0
flex-basis:auto

---

可以寫成
flex: auto

flex-grow:1
flex-shrink:1
flex-basis:auto

---

## order (可以指定出現的順序）
 - order:0 (預設)
 - order: -1 (這樣會在最前面)
 - order: 5  （這樣會在最後面）

在做rwd時,偶爾需要調動他的次序,這時候order就很好用
