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

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

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

HTML

<p>內容</p>

CSS

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

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

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

result


範例:

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

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

result


---
## 盒模型
content-box(藍)
padding-box(綠)
border-box(黃)
margin-box(橘)

## box-sizing

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

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

CSS

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

**result**
content(200px)


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

.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)



## reset

## display:flex

### flex-direction 主軸方向

row 水平(預設)


row-reverse 水平反轉


column 垂直


column-reverse 垂直反轉


:::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)

center (h:500px;w:500px)

flex-end (h:500px;w:500px)

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

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

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


---
### 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)

center (h:500px;w:500px)

flex-end (h:500px;w:500px)

space-between (h:700px;w:500px)

space-around (h:700px;w:500px)

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

---

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

flex-start (h:500px;w:500px)

center (h:500px;w:500px)

flex-end (h:500px;w:500px)

---

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

#### order (預設為0)

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

---

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

舉例:單獨把區塊二設定 align-self: flex-end時

---

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

---

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

---

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

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