超Q的彈性盒子——flex✨

語言: CN / TW / HK
時間 2021-11-06 17:15:12

這是我參與11月更文挑戰的第6天，活動詳情檢視：2021最後一次更文挑戰

超Q的彈性盒子——flex✨

還記得小時候的QQ糖嗎，超Q的口感。
而在佈局中所使用的彈性盒子也會讓你在開發中QQ彈彈
Come on baby

為什麼說它超彈呢？

  1. 與傳統佈局對比：
  2. 傳統佈局：基於盒狀模型，依賴 display，position，float屬性，並且它對於那些特殊佈局非常不方便，比如，無法直接實現垂直居中
  3. flex佈局：它是一種一維的佈局模型，它給 flexbox 的子元素之間提供了強大的空間分佈和對齊能力，所以它能很簡單地實現一些特殊佈局。
  4. 它的特性與概念：
  5. 任何一個容器（div）都可以使用flex佈局
  6. 採用flex佈局的元素被成為flex容器，所有子元素都會成為它的成員。
  7. 採用flex的元素其float，clear都會失效
  8. 一維的特性使其擁有兩根軸，水平的主軸與垂直的交叉軸（預設主軸排列）

Q彈的配料之flex屬性

在flex容器中加入六種配料即六種屬性，讓佈局更簡單！

  1. flex-direction屬性
    flex-direction屬性決定主軸的方向

| 屬性值 | 作用 | | :-----| :----: | | row | 主軸為水平方向，起點在左端 | | row-reverse | 主軸為水平方向，起點在右端 | | colmun | 主軸為垂直方向，起點在上端 | | colmun-reverse | 主軸為垂直方向，起點在下端 |

css .flex-box { flex-direction: row ; flex-direction: row-reverse ; flex-direction: column ; flex-direction: column-reverse ; }

row.gif 2. flex-wrap屬性
flex屬性定義在一條軸線上子成員發生擁擠，如何換行排列。 | 屬性值 | 作用 | | :-----| :----: | | nowrap | 不換行（將子成員寬度縮小） | | wrap | 換行且第一行在上方 | | wrap-reverse | 換行且第一行在下方 |

css .flex-box { flex-wrap: nowrap ; flex-wrap: wrap ; flex-wrap: wrap-reverse; }

wrap.gif 3. justify-content屬性
justify-content屬性定義了專案在主軸上的對齊方式。 | 屬性值 | 作用 | | :-----| :----: | | flex-start | 左對齊 | | flex-end | 右對齊 | | center | 居中 | | space-between | 兩端對齊，且間隔相等 | | space-around | 每個子成員間隔相等 |

css .flex-box { justify-content: flex-start ; justify-content: flex-end ; justify-content: center ; justify-content: space-between ; justify-content: space-around ; }

flexstart.gif 4. align-items屬性
align-items屬性定義專案在交叉軸上如何對齊。 | 屬性值 | 作用 | | :-----| :----: | | flex-start | 交叉軸的起點對齊 | | flex-end | 交叉軸的終點對齊 | | center | 交叉軸的中點對齊 | | baseline | 專案的第一行文字的基線對齊 | | stretch | 如果專案未設定高度或設為auto，將佔滿整個容器的高度 |

css .flex-box { align-items: flex-start ; align-items: flex-end ; align-items: center ; align-items: baseline ; align-items: stretch ; }

4.gif 5. align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。 | 屬性值 | 作用 | | :-----| :----: | | flex-start | 與交叉軸的起點對齊 | | flex-end | 與交叉軸的終點對齊 | | center | 與交叉軸的中點對齊 | | baseline | 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍 | | stretch | 軸線佔滿整個交叉軸 |

css .flex-box { justify-content: flex-start ; justify-content: flex-end ; justify-content: center ; justify-content: space-between ; justify-content: space-around ; justify-content: stretch; }

5.gif

「」
「」