---
# System prepended metadata

title: 偽元素/盒模型概念/flex運用

---

# 偽元素/盒模型概念/flex運用

## 偽元素 ::after 和 ::before

透過偽元素在原本內容的前面或後面加入content，通常用於裝飾用途。

HTML
```html
<p>內容</p>
```

CSS

```css
p {
  background-color: aquamarine;
  font-size: 50px;
}

p::before {
  content: "我是Before";
  color: blueviolet;
}

p::after {
  content: "我是After";
  color: blueviolet;
}

```

result

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


範例:

```css
p {
  background-color: aquamarine;
  font-size: 50px;
  text-align: center;
}

p::after {
  content: "";
  display: block;
  width: 1em;
  height: 2px;
  background: red;
  margin: auto;
}

```

result

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

---
## 盒模型
content-box(藍)
padding-box(綠)
border-box(黃)
margin-box(橘)
![](https://i.imgur.com/jGxOkdz.png)


## box-sizing

說明 : 改變寬跟高的作用區

1. content-box(預設):寬高作用區為content(內容200px)


CSS

```css
.box {
  width: 200px;
  font-size: 20px;
  background-color: aqua;
  margin: 20px;
  padding: 20px;
  border: 20px solid blue;
}
```

**result**
content(200px)
![](https://i.imgur.com/VAOkCh6.png)

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


2. box-sizing : 寬高作用區為border

```css
.box {
  width: 200px;
  font-size: 20px;
  background-color: aqua;
  margin: 20px;
  padding: 20px;
  border: 20px solid blue;
  box-sizing: border-box;
}
```
result 
content(120px)+padding(40px)+border(40px)=width(200px)

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

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


## reset


## display:flex



### flex-direction 主軸方向

row 水平(預設)

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


row-reverse 水平反轉

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


column 垂直

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


column-reverse  垂直反轉

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


:::warning
dir (預設:由左至右) : 改變語言閱讀方向，遇到語言由右至左閱讀的國家時會用到，例:阿拉伯文，希伯來文。

writing-mode (預設:由左至右) : 改變書寫方向。
:::

### 主軸 vs 交叉軸

:::info
#### justify-content 和 align-content 的共同屬性
對齊
flex-start（預設）
center 置中
flex-end 終點

空間分佈 
space-between 左右靠到最邊
space-around  平均分配同等的margin給每個子物件
space-evenly  平均分配空間給每個子物件
:::

#### justify-content (主軸 main-axis)
控制**子層主軸**的對齊與分佈

flex-start (h:500px;w:500px)
![](https://i.imgur.com/x88fgPo.png)


center (h:500px;w:500px)
![](https://i.imgur.com/j3Habx5.png)

flex-end (h:500px;w:500px)
![](https://i.imgur.com/NsFlJzR.png)

space-between (h:500px;w:500px)
![](https://i.imgur.com/NXC55eb.png)

space-around (h:500px;w:500px)
![](https://i.imgur.com/m3hABk0.png)

space-evenly (h:500px;w:500px)

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

---
### flex-wrap (交叉軸 cross-axis) 
1. 超出寬度範圍是否換行(**交叉軸**方向)
( flex-wrap:wrap 才會有彈性列，會由最高子層高度去撐開彈性列，align-content才可以針對**彈性列**作位置和空間變化。)
2. wrap-reverse:交叉軸的cross-start 跟 cross-end 互換
:::warning
Q: 換行後，彈性列的空間為何?
A: 預設計算方式為(父層的高度-最高子物件)，之後平均分配到各行
:::

---

#### align-content (交叉軸 cross-axis)

控制子層**彈性列**在**交叉軸**的對齊和分佈(彈性列高度為最高為主)

flex-start (h:500px;w:500px)
![](https://i.imgur.com/Cip4GNH.png)

center (h:500px;w:500px)
![](https://i.imgur.com/fxFShMM.png)

flex-end (h:500px;w:500px)
![](https://i.imgur.com/xLmK1Ju.png)

space-between (h:700px;w:500px)
![](https://i.imgur.com/wozhOFJ.png)


space-around (h:700px;w:500px)
![](https://i.imgur.com/0OOnI7d.png)


space-evenly (h:700px;w:500px)
![](https://i.imgur.com/DTySUZp.png)


---

#### align-item (交叉軸 cross-axis)
控制子物件在彈性列中對齊的位子和分佈的空間

flex-start (h:500px;w:500px)
![](https://i.imgur.com/XrX22hM.png)


center (h:500px;w:500px)
![](https://i.imgur.com/i6esrfO.png)

flex-end (h:500px;w:500px)
![](https://i.imgur.com/aqM0Say.png)


---

### 對flex單一物件控制(子層)

#### order (預設為0)

數字大會優先往**主軸方向**移動，數字小會往主軸起始位子移動

---

#### align-self
 針對單一子物件變換在其彈性列交叉軸中的對齊位子

舉例:單獨把區塊二設定 align-self: flex-end時
![](https://i.imgur.com/G98lmAx.png)

---

#### flex-basis [主軸]
子物件在主軸上的長度，會覆寫掉原本的主軸長度。
(row → width; column → height)

---

#### flex-grow (伸展值)[主軸]
將主軸上物件外剩餘空間分配到該子物件主軸長度

---

#### flex-shrink (收縮值)[主軸]
子物件寬度超出父層空間時，對該子物件主軸長度做收縮，預設為1 (0的時候不會收縮)。通常用在不想因為畫面變小而被收縮的清單，會設置其寬度，並將收縮直設為 0 固定其寬度。
:::info
shorthand

flex: <flex-grow> <flex-shrink> <flex-basis>
:::



