Flexbox佈局初學者

1、justify-content（水平對齊元素）

flex-start: 元素和容器的左端對齊
flex-end: 元素和容器的右端對齊
center: 元素在容器里居中
space-between:元素之間保持相等的距離
space-around:元素周圍保持相等的距離

{
  display: flex;
  justify-content: flex-end;
}

2、align-items（縱向對齊元素）

flex-start: 元素與容器的頂部對齊
flex-end: 元素與容器的底部對齊
center: 元素縱向居中
baseline: 元素在容器的基線位置顯示
stretch: 元素被拉伸以填滿整個容器

---

3.flex-direction（元素在容器裏擺放的方向）

row: 元素擺放的方向和文字方向一致。
row-reverse: 元素擺放的方向和文字方向相反。
column: 元素從上放到下。
column-reverse: 元素從下放到上

注意：
- 調轉行或列的方向後，flex-start和flex-end對應的方向也被調轉了
- 當flex以列爲方向時，justify-content控制縱向對齊，align-items控制橫向對齊

---

4.order（順序-控制單個元素）
可爲正負值，元素的屬性默認值爲0

.child {
  order: 1;
}

---

5.align-self（同align-items-控制單個元素）

---

6.flex-wrap（換行）

nowrap: 所有的元素都在一行
wrap: 元素自動換成多行
wrap-reverse: 元素自動換成逆序的多行

注意：flex-direction和flex-wrap兩個屬性經常會一起使用，所以有縮寫屬性flex-flow

---

7.align-content（對齊方式）

flex-start: 多行都集中在頂部
flex-end: 多行都集中在底部
center: 多行居中
space-between: 行與行之間保持相等距離
space-around: 每行的周圍保持相等距離
stretch: 每一行都被拉伸以填滿容器