---
tags: CSS,flex
---
# CSS-flex大全
好用官網
https://yoksel.github.io/flex-cheatsheet/#section-flex-direction
# 寫在母元素
## 主軸方向

// 進入flex模式
display: flex;


// 主軸水平
// 預設
flex-direction: row;


// 主軸水平，子元素順序顛倒
flex-direction: row-reverse;


// 主軸垂直
flex-direction: column;


// 主軸垂直，子元素順序顛倒
flex-direction: column-reverse;

## 主軸對齊

// 主軸對齊方式
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;

justify-content: space-between;


justify-content: space-around;


justify-content: space-evenly;

## 交叉軸對齊

// 交叉軸對齊方式
align-items: stretch; // 將所有子元素次軸長都跟最長那個一樣
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

## 主軸換行

// 預設
flex-wrap: nowrap;


// 若主軸不夠放就會換行
flex-wrap: wrap;


// 從main-end開始排列
flex-wrap: wrap-reverse;

## 換行後間隔
一定要符合前提條件
1.flex-wrap: wrap;
2.真的有換行

align-content: flex-start;
align-content: flex-end;
align-content: center;

align-content: stretch;


align-content: space-between;


align-content: space-around;

# 寫在子元素
## flex-basis

// 子元素在主軸方向長度
// 另一種說法為在flex內分配的空間
// 可以用%
// 可能對應width也可能對應height
// 預設width: min-content;
// 若basis過小則不生效，若想強制生效可以width:0;
flex-basis: 100px;

## flex-grow

// 功能:把主軸填滿(設定前狀態填不滿)
// 可以把flex-basis設為0
flex-grow: 1;
// 子元素數*(flex-basis + 1x) = 母元素主軸長
// 子元素在主軸方向長度變為(flex-basis + 1x)
------
// 例題
// 有5個元素，元素1特別大，剩下4元素大小相等均分
// 元素1設置flex-grow: 6;
// 剩下元素flex-grow: 1;
// 4*(flex-basis + 1x) + 1*(flex-basis + 6x) = 母元素主軸長

## flex-shrink

// 功能:把主軸填滿(設定前狀態overflow)
flex-shrink: 1;
// 子元素加總長 - (子元素數)*1x = 母元素主軸長
// flex-basis - shrink設定值* x = 新的單一子元素長
------
// 例題
// 有5個元素，元素1特別大，剩下4元素大小相等均分
// 元素1設置flex-shrink: 1;
// 剩下元素flex-shrink: 2;
// 子元素加總長 - [ (1*1x) + (4*2x) ] = 母元素主軸長
// flex-basis - 1x = 元素1長
// flex-basis - 2x = 剩餘元素單一長

## flex

// 複合屬性
flex: 0 1 auto; // 都是預設值
flex: initial; // 和上面一樣
// 第一為flex-grow: 0;
// 第二為flex-shrink: 1;
// 第三為flex-basis: auto;

# 其他配合屬性

// 內容過多都打死不換行
width: max-content;
// 將寬度訂為內容中英文單詞最長的那一個寬
width: min-content;