[ 筆記 ] CSS - FlexBox


Posted by krebikshaw on 2020-07-13

遊戲連結:FLEXBOX FROGGY

好用模擬器:Codpen - handy flexbox tool

Flex 排版起手式

  • 於要排版的外部容器加上 display: flex;
    • flex
    • inline-flex
      • 作用類似於 inline-block + flex

justify-content 水平對齊方式

  • 語法:justify-content: <following values>;
    • flex-start 靠左對齊 預設值
    • flex-end 靠右對齊
    • center 置中對齊
    • space-between 分散對齊( 左右邊不留間距 )
    • space-around 分散對齊( 左右邊有留間距,最旁邊的間距為內間距的一半 )
    • space-evenly 均分對齊( 左右邊有留間距,所有間距一致 )
      • 比較新的屬性值,要注意瀏覽器支援度問題。

align-items 垂直對齊方式

  • 語法:align-items: <following values>;
    • stretch 元素裡的內容撐滿對齊 預設值
      • 計算最長的元素高度,把所有元素都設成一樣高度
    • flex-start 靠上對齊
    • flex-end 靠下對齊
    • center 置中對齊
    • baseline 元素裡的文字內容對齊 flex 基準線

flex-direction 排列方向

  • 語法:flex-direction: <following values>;
    • row 水平排列 預設值
    • row-reverse 反向的水平排列
      • 注意:如果改成反向排列,flex-start 及 flex-end 效果會顛倒
    • column 垂直排列
    • column-reverse 反向的垂直排列
      • 注意:如改成垂直排列 column,調整水平 & 垂直的方式會倒過來
    • justify-content 會變成「 調整垂直對齊 」
    • align-items 會變成 「 調整水平對齊 」

flex-wrap 元素超過範圍是否換行

當頁面寬度過窄,以致於內容無法完整呈現的時候,是否要進行換行。

  • 語法:flex-wrap: <following values>;
    • nowrap: 所有元素排在同一行 預設值
    • wrap: 元素會換行
    • wrap-reverse: 元素會換行,且反轉方向

flex-flow 排列方向 與 斷行方式

  • 結合 flex-direction & flex-wrap
  • 語法:flex-flow: <following values>;
    • row wrap: 水平排列,元素會換行
    • column nowrap: 垂直排列,所有元素在同一行
    • 其他 direction 及 wrap 的組合

align-content 多行元素的垂直對齊

  • align-items 的多行版本,裡面有需要換行的元素就可以使用 align-content,若元素只有單行則無作用。
  • 語法:align-content: <following values>;
    • stretch: 所有元素 撐滿上下邊 預設值
    • flex-start: 緊密 靠上對齊
    • flex-end: 緊密 靠下對齊
    • center: Lines: 緊密 置中對齊
    • space-between: 分散對齊( 上下不留間距 )
    • space-around: 分散對齊( 上下有留間距 )

order 單個元素的排列順序

設置 order 可以重新定義元件的排列順序,順序會依據數值的大小排列。 ( 這在 RWD 想改元素位置,應該非常實用! )

  • 整數 : 預設值為 0
  • 順序: 最小(可能為負數)→ 最大

align-self 該元素的垂直對齊方式

  • 語法:align-self: <following values>;
    • flex-start 靠上對齊
    • flex-end 靠下對齊
    • center 置中對齊
    • baseline 基準線對齊
    • stretch 撐滿上下邊

flex-grow 該元素佔用容器剩餘的比例

  • 可以當作是 平分外層容器「 剩餘的位置 」。 如果子元素加起來的空間大於外容器,設置 flow-grow 則不會起作用。

  • 整數 : 預設值為 0

flex-shrink 該元素壓縮比例

  • 當外層空間不夠時,壓縮元素的比例

  • 整數 : 預設值為 1

flex-basis 該元素的基準值,類似於 min-width

  • 可使用不同單位,意思是一開始就會分配給該元素多少的空間,不會被壓縮到。 如果同時設置 flex-basis 跟 width, width 會被蓋掉。

  • <num> px or <num> % : 預設值為 auto

flex 全部寫在一起

  • 結合剛剛介紹的三項 flex-grow、flex-shrink、flex-basis

  • 例如: flex: 1 2 50px

  • 預設值: 0 1 auto
  • 如果只寫一個數值,代表 flex-grow
    • flow: 1 ( 如果只有一個子元素設置,代表該子元素佔滿「 外容器所有的剩餘空間 」 )

統整

  • 父容器使用:
.flex_container {
  /* flex 排版 */
  display: flex | inline-flex;
  /* 水平對齊 */
  justify-content: flex-start | flex-end | center | space-between | space-around;
  /* 垂直對齊 ( 單一行 ) */
  align-items: flex-start | flex-end | center | baseline | stretch;
  /* 排列方向 */
  flex-direction: row | row-reverse | column | column-reverse;
  /* 換行方式 */
  flex-wrap: nowrap | wrap | wrap-reverse;
  /* 結合 排列方向 與 換行方式 */
  flex-flow: <flex-direction> <flex-wrap>;
  /* 多行的垂直對齊 */
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • 子容器使用
.flex_item {
  /* 該元素的排列位置 */
  order: <number>;
  /* 該元素佔用容器剩餘的比例 */
  flex-grow: <number>;
  /* 該元素壓縮比例 */
  flex-shrink: <number>; 
  /* 該元素的最小值 */
  flex-basis: <length> | auto;
  /* 結合上面 3 種屬性 */
  flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>
}

參考資料:
圖解:CSS Flex 屬性一點也不難
簡單介紹 CSS Flexbox(上)
深入理解css3中的flex-grow、flex-shrink、flex-basis
A Complete Guide to Flexbox
Master CSS Flexbox in 5 Simple Steps
How can I make this f*g layout?


#flex







Related Posts

DAY 00 : 自我介紹

DAY 00 : 自我介紹

Web開發學習筆記19 — Git

Web開發學習筆記19 — Git

CSS保健室|background-attachment

CSS保健室|background-attachment


Comments