簡單理解flex佈局

這個佈局我諸葛小亮布定了！！！

flex

• flex核心概念是容器和軸，父子容器各6個

容器

• 父容器能夠統一設置子容器的排列方式，自容器也能夠單獨設置自身的排列方式，若是二者同時設置，以子容器設置爲準

父容器

• flex-wrap決定子容器是否換行

  • nowrap: 不換行
  • wrap：換行
  • wrap-reverse 逆序換行

• flex-flow 決定子容器軸向與換行設置，它是複合屬性，至關於flex-direction與flex-wrap組合，可選取的值

  • row ，column 可單獨設置主軸方向
  • wrap, nowrap 可單獨設置換行
  • row nowrap, column wrap

• 設置子容器主軸（橫向）排列justify-content

  • flex-start 起始端對齊
  • flex-end末尾段對齊
  • center居中對齊
  • space-around 子容器沿主軸分佈，位於首尾的子容器到父容器的距離是子容器間距的一半
  • space-between 子容器沿主軸均勻分佈，位於首尾的子容器與父容器相切

• 設置子容器沿交叉軸（縱向）排列align-items（用於定義如何沿交叉軸方向分配子容器的間距）

  • flex-start 起始端對齊
  • flex-end末尾端對齊
  • center 居中對齊
  • baseline 基線對齊，全部子元素中的首行文字對齊
  • stretch 子容器沿交叉軸方向的尺寸拉伸至於父容器一致(讓子容器高度和父容器高度一致）

子容器

• 在主軸上使用flex進行伸縮，flex的值能夠是無單位數字（1,2,3）能夠是有單位數字（15px,30px,）還能夠是none關鍵字。子容器會按照flex定義的尺寸比例自動伸縮，若是去none則不伸縮
• align-self 單獨設置子容器如何沿交叉軸（縱軸）排列
  • flex-start起始端對齊
  • flex-end 末尾端對齊
  • center居中對齊
  • baseline 基線對齊
  • stretch拉伸對齊

軸

• 主軸
  • flex-direction: row 從左向右排列
  • flex-direction: column從上向下排列
  • flex-direction: row-reverse 從右向左排列
  • flex-direction: column-reverse 從下往上排列