By

看 Amos 大大的影片作筆記。

啟動 FLEX

  • 在父層設定 display: flex;

FLEX 三大特性

  • 延展比 flex-grow
  • 收縮比 flex-shrink
  • 基本比 flex-basis

父層設定

橫向直向切換

  • 橫向 flex-direction: row;
  • 直向 flex-direction: column;

資料流對齊

  • justify-content (主軸對齊方式)
  • align-items (交叉軸對齊方式：單行)
  • align-content (交叉軸對齊方式：多行)

橫向 flex-direction: row; <—預設

//水平由左至右
justify-content: flex-start;    (水平靠左)
justify-content: center;        (水平置中)
justify-content: flex-end;      (水平靠右)
justify-content: space-around;  (水平分散對齊)
justify-content: space-between; (左右兩端貼齊)

//垂直由上至下
align-items: flex-start;        (垂直靠上)
align-items: center;            (垂直置中)
align-items: flex-end;          (垂直靠下)
align-items: space-around;      (垂直分散對齊)
align-items: space-between;     (上下兩端貼齊)
align-items: stretch;           (延展) <---預設

//space-around  將剩下的空間平均分到每個項目的左右兩邊
//space-between 將剩下的空間平均分到每項項目之間

flex 預設不會換行

  • 若要換行需加上 flex-wrap: wrap;

範例1：橫向、多列、水平垂直置中

範例2：直向、單行、水平垂直置中、2號 align-self

子項目設定

範例3：橫向、單列、水平垂直置中、order

範例4：橫向、單列、水平垂直置中、flex-basis, flex-grow

  • flex-basis 設為 0px，代表每個子項目寬為 0px，剩餘空間就是整個父層的空間，再利用 flex-grow 去分配剩餘空間，這就是 Bootstrap 4 的作法。
  • 但這招用在單列 OK，多列會有問題。

範例5：橫向、單列、水平垂直置中、flex-shrink

  • flex-shrink: 0 (不伸縮)
  • flex-shrink: 1 (伸縮) <—預設

flex-shrink (收縮比)

  • 總比值：各個子項目的寬度 * 收縮比，並加總之結果。
  • 超出值：
  • 扣除值：

(子項目的寬度 * 收縮比 / 總比值) * 超出值 = 扣除值

其他

  • display: inline-block; 的時候如果要垂直置中，vertical-align: middle; //注意不是用 center
  • 唯一用 middle 的只有 vertical-align

參考