CSS：彈性佈局（display:flex）

救苦救难韩天尊發表於2024-07-18
CSSFlex

道友請了~ 最近小道在修練主修功法《嘉蛙》之餘，偶然從一名散修手中得到了一本《CSS秘籍》，剛好近期有自己做微信小程式的打算，這不是瞌睡了給遞枕頭麼。欣喜若狂，翻開第一章，拜讀之後受益匪淺。韓老魔說過：好記性不如爛筆頭。（韓老魔：我沒說過！）遂謄抄一份，分享給各位道友。

@

目錄
  • 容器的屬性
    • justify-content：控制主軸上的子項對齊方式
    • align-items：控制交叉軸上的子項對齊方式。
    • flex-direction：定義主軸的方向，即子元素的主要排列方向
    • flex-wrap：是否換行及換行的方向
    • align-content：多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用
    • flex-flow：flex-direction 和 flex-wrap 的簡寫形式

彈性佈局的設計理念是讓容器能夠根據空間的變化自動調整其子元素的大小和位置，從而在不同螢幕尺寸和裝置上建立響應式和適應性強的介面。

Flex 佈局的核心概念包括：

  1. 容器 (Flex Container): 當一個元素的 display 屬性被設定為 flex 或 inline-flex 時，這個元素就變成了一個 Flex 容器。這將改變其預設的佈局行為，使其遵循 Flex 佈局規則。
  2. 子項 (Flex Items): Flex 容器的所有直接子元素都自動成為 Flex 子項，它們將根據容器的 Flex 屬性進行佈局。
  3. 主軸 (Main Axis): 這是 Flex 容器中預設的方向，可以是水平或垂直，取決於 flex-direction 屬性的值。Flex 子項沿主軸排列。
  4. 交叉軸 (Cross Axis): 這是與主軸垂直的方向。當 Flex 子項堆疊在主軸上時，交叉軸決定了子項的層疊順序。

容器的屬性

justify-content：控制主軸上的子項對齊方式

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

align-items：控制交叉軸上的子項對齊方式。

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

flex-direction：定義主軸的方向，即子元素的主要排列方向

  • row（預設值）：主軸為水平方向，起點在左端。
  • row-reverse：主軸為水平方向，起點在右端。
  • column：主軸為垂直方向，起點在上沿。
  • column-reverse：主軸為垂直方向，起點在下沿。

flex-wrap：是否換行及換行的方向

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap（預設）：不換行
  • wrap：換行，第一行在上方
  • wrap-reverse：換行，第一行在下方

align-content：多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start：與交叉軸的起點對齊。
  • flex-end：與交叉軸的終點對齊。
  • center：與交叉軸的中點對齊。
  • space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
  • space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
  • stretch（預設值）：軸線佔滿整個交叉軸

flex-flow：flex-direction 和 flex-wrap 的簡寫形式

  • 這是 flex-direction 和 flex-wrap 的簡寫形式，例如 flex-flow: row wrap;

透過組合使用這些屬性，你可以建立出複雜而靈活的佈局，適應不同的螢幕尺寸和內容需求。

相關文章