1、常見的父項(xiàng)布局

• flex-direction 設(shè)置主軸的方向

包含四個屬性值：

row: 默認(rèn)值，表示沿水平方向，由左到右。
row-reverse ：表示沿水平方向，由右到左
column：表示垂直方向，由上到下
column-reverse:表示垂直方向，由下到上

• justify-content： 設(shè)置主軸上的子元素排列方式 屬性定義了項(xiàng)目在主軸上的對齊方式
  注意： 使用這個屬性之前一定要確定好主軸是哪個

flex-start：默認(rèn)值，左對齊
flex-end：右對齊
center：居中對齊
space-between：兩端對齊
space-around：每個項(xiàng)目兩側(cè)的間距相等

• flex-wrap： 設(shè)置子元素是否換行

nowrap 默認(rèn) 不換行
wrap 換行

• align-content： 設(shè)置側(cè)軸上的子元素的排列方式（多行）
  

• align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）

flex-start 默認(rèn)值 從上到下
flex-end 從下到上
center 擠在一起居中 （垂直居中）
stretch 拉伸

align-content 和 align-items 區(qū)別

• align-items 適用于單行情況下， 只有上對齊、 下對齊、居中和拉伸
• align-content 適應(yīng)于換行（多行）的情況下（單行情況下無效），可以設(shè)置上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值。
  總結(jié)就是單行找align-items多行找 align-content

• flex-flow： 復(fù)合屬性， 相當(dāng)于同時設(shè)置了 flex-direction 和 flex-wrap

2、常見的子項(xiàng)布局

• flex 屬性定義子項(xiàng)目分配剩余空間，用flex來表示占多少份數(shù)。默認(rèn)為0
  
  案例一

案例二

案例二

• align-self控制子項(xiàng)自己在側(cè)軸上的排列方式
  align-self屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，
  可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
  

• order屬性定義項(xiàng)目的排列順序,數(shù)值越小，排列越靠前，默認(rèn)為0。
  注意：和z-index 不一樣(相反的意思)。
  

  image.png