CSS3 Flexbox 重點精華

CSS3 Flexbox,是一種新興的排版方式 (現在講其實已經不新了,最新的是 Grid…),它優於傳統 float 僅能水平流動的排版,更能做到置中、垂直與等距等等。在學習 bootstrap v4 之前,讓我們先來看一下 Flexbox 的重要觀念。

軸線觀念

flexbox

  • 主軸:
    • justify-content
    • 可對其主軸的起點、終點或等距排列
  • 交錯軸:
    • align-items
    • 可對其交錯軸的起點、終點或置中
  • flex-direction,可改變主軸的方向性 (預設主軸是由左至右)
    • 水平
    • 垂直
    • 反轉

外層屬性

  • display:必備屬性
  • flex-flow
    • flex-direction:決定 flex 軸線
    • flex-wrap:決定換行的屬性
  • justify-content:主軸的對齊
  • align-items:交錯軸的對齊

內層屬性

  • flex
    • flex-grow:伸展比
    • flex-shrink:收縮比
    • flex-basis:絕對值
  • order:排序
  • align-self:單一物件的交錯軸對齊

接著來看一下細部的屬性介紹

flex-direction

對齊方法

  • row (default)
  • row-reverse
  • column
  • column-reverse

justify-content

主軸對齊 (外層) ,依據主軸的軸線決定物件之間的間隔方法

以下是 justify-content 所有屬性:

justify-content-property

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

節錄:MSDN

align-items

交錯軸對齊 (外層),垂直於主軸的對齊方法

align-items-property

  • flex-start
  • flex-end
  • center
  • strech:拉滿整個軸線
  • baseline:與文字的行高有關係,以文字基準線來排列

節錄:MSDN

align-self

交錯軸對齊 (內層),內元件本身垂直於主軸的對齊方法

align-self-property

  • flex-start
  • flex-end
  • center
  • strech:拉滿整個軸線
  • baseline:與文字的行高有關係,以文字基準線來排列

 

重點部分介紹就介紹到這,其他一些比較細的例如自動幫你算的設定就遇到再說囉!

 


參考資料:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料