CSS3彈性盒模型
1、傳統的佈局
基於盒模型，依賴 display 屬性 + position 屬性 +float 屬性
2、CSS3 彈性盒（ Flexible Box 或 flexbox）
CSS3 彈性盒是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
所謂彈性，是為盒狀模型提供最大的靈活性，可以很好的適應螢幕或者視窗的大小變化。
3、容器屬性
（1）flex-direction: row（預設） | row-reverse | column | column-reverse ；彈性容器中子元素的排列方式
（2）justify-content: flex-start | flex-end | center | space-between | space-around；子元素在主軸（橫軸）方向上的對齊方式
（3）align-items: flex-start | flex-end | center | baseline | stretch；子元素在側軸（縱軸）方向上的對齊方式
以上主軸側軸對齊如果不理解（比如我）闊以看一哈這位大佬的部落格，有演示，很清楚：
（4）flex-wrap: nowrap（預設）|wrap|wrap-reverse|initial|inherit；子元素超出父容器時是否換行，如何換行
（5）align-content: flex-start | flex-end | center | space-between | space-around | stretch；
修改 flex-wrap 屬性的行為，類似 align-items, 但不是設定子元素對齊，而是設定行對齊
（6）flex-flow:flex-direction 和 flex-wrap 的簡寫；
4、子元素屬性
（1）排序-order：用整數值來定義排列順序，數值小的排在前面。可以為負值
（2）對齊-align-self: auto | flex-start | flex-end | center | baseline | stretch ;設定彈性元素自身在側軸（縱軸）方向上的對齊方式
(3) flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]；指定彈性子元素如何分配空間
各個值解析:
- auto: 計算值為 1 1 auto，除了佔據原先的寬度外，還要分配剩餘寬度(包括擴充套件或收縮)
- initial: 計算值為 0 1 auto ，除了佔據原先的寬度外，還要分配剩餘寬度(只收縮，不擴充套件)
- none：計算值為 0 0 auto，寬度為原始寬度，不發生擴充套件或收縮
- inherit：從父元素繼承
- [ flex-grow ]：定義彈性盒子元素的擴充套件比率。
- [ flex-shrink ]：定義彈性盒子元素的收縮比率。
- [ flex-basis ]：定義彈性盒子元素的預設基準值。
兩個常見的面試題：
（1）元素垂直居中：
margin-方向:值；方向寫的哪兒，剩餘空間就自動哪，比如margin-right: auto，剩餘空間就在右邊
現在只需要將父元素設定成彈性盒模型：display: -webkit-flex;display: flex;
子元素：margin: auto;
所以這可真是個好東西啊，方便多了
（2） 左右兩部分，左邊固定寬度，右邊自適應視窗大小，手機APP裡這種情況很常見，例如下圖，左邊是商品圖片，一般大小固定，右邊商品詳情，會根據手機螢幕大小自適應，能顯示多少顯示多少
我自己寫了個：
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper{
display: flex;
display: -webkit-flex;
height: 100px;
}
#left{
width: 100px;
background: green;
flex:0 0 auto;
}
#right{
background: red;
flex:1 1 auto;
}
</style>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>效果如下：
