1、CSS3彈性盒模型
面試題！！
1.1、怪異盒模型與標準盒模型
1.1.1、兩者邊框大小一樣，彈性盒模型content大小發生變化。總體不變。
標準盒模型content大小不變，總體發生變化。
怪異盒模型：
box-sizing：content-box
標準盒模型：
box-sizing:border-box
2、定義彈性盒模型：
2.1、父級添加聲明display:flex
2.2、平分盒模型空間：flex:1
2.3、兼容性：加前綴
display:-webkit-flex
3、排列方式：
flex-direction
3.1、豎向排列，從上到下：flex-direction:colum
3.2、橫向排列，從左到右：flex-direction:row（默認）
3.3、橫向反方向，從右到左：flex-direction:row-rever
3.4、豎向反方向，從下到上：flex-direction:colum-rever
4、主軸（justity-content）
4.1、X軸，從頂部開始（默認方式）：justify-content:flex-start
4.2、X軸，從末端開始：justify-content:flex-end
4.3、X軸，從中間到兩邊，justify-content:flex-center
4.4、兩端對齊，中間自適應：justify-content:space-between
4.5、自動分配距離：justify-content:space-around
5、側軸（Y軸）
5.1、排列方式
align-items
5.2、align-items:flex-start
5.3、align-items:flex-end
5.4、align-items:flex-center
5.5、align-items:baseline作用與flex-first等效
5.6、設置居中：（面試題！！！）
X軸：justify-content：flex-center
Y軸：align-items：center
6、換行（flex-wrap）
6.1、必須滿足條件：橫向排列（flex-direction:row）
6.2、換行方式：
6.2.1、換行：flex-wrap:wrap
6.2.2、不換行：flex-wrap:nowrap
6.2.3、反轉換行，即上下顛倒換行：flex-wrap:wrap-reverse
7、行與行之間的對齊
align-conter
7.1、必須滿足條件：
條件1：有多行，即多個div
條件2：換行：flex-wrap:wrap
7.2、對齊方式
7.2.1、水平居左：align-content:start
7.2.2、水平居中：align-content:center
7.2.3、水平居右：align-content:end
8、單獨設置元素位置（子級）
align-self
8.1、左 div:nth-child(1){align-slefflex-start;}
8.2、中flex-center
8.3、右flex-end
8.4、若子級無寬高，則繼承父級：align-self:stretch
8.5、繼承父級：align-self:baseline
8.6、繼承父級：align-self:auto
9、優先級
order
9.1、order與z-index的區別
order值越大，權重越小
z-index值越小，權重越大
10、flex
10.1、平均分配：flex:1
書寫格式：
1、定義彈性盒模型
display:flex
2、設置水平排列
flex-wrap:row
3、設置主軸
justify-content:flex-start
