簡要介紹
flex 即 flexible box 彈性佈局盒模型，,是2009年 w3c 提出的一種新型佈局的屬性，引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。瀏覽器支持如下：
flex 盒子模型的出現主要是爲了解決基於 display+position+float 的處理部分情況的不便，比如居中佈局：
使用定位：
.father{
width: 400px;
height: 400px;
position: relative;
}
.children{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
height: 50%;
margin-left: -50px;
margin-top: -50px;
}
使用 flex 情況：
.father{
width: 400px;
height: 400px;
display: flex;
justify-content:center;
align-items:center;
}
.children{
width: 100px;
height: 100px;
}
可以看見如果使用了 flex，就很就簡單了。justify-content 和 align-items 分別定義了伸縮項目沿着主軸線的對齊方式和伸縮項目沿着縱軸對齊方式，Flex 的好處遠遠不止這些，下面我們來看下 w3c 定義的基本屬性。
基本概念
主軸（main axis）：沿着一個伸縮容器的主軸配置伸縮項目，主軸是主軸方向的延伸。
縱軸（cross axis）：與主軸垂直的軸稱作側軸，是側軸方向的延伸。
容器屬性
3.1 Flex-direction
flex-direction 會決定主軸的方向，它的值如下:
row（默認）：橫向排列（左對齊）。
row-reverse：反轉橫向排列。
column：縱向排列。
column-reverse：反轉縱向排列。
Flex-wrap
nowrap - 默認，彈性容器爲單行。
wrap - 彈性容器爲多行。
Flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的簡寫，可同時賦值 ， 默認 row nowrap。
Justify-content
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊。
space-around：彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。
Align-items
flex-start：縱軸的起點對齊。
flex-end：縱軸的終點對齊。
center：縱軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認）：如果指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸。
Align-conten
flex-start：與縱軸的起點對齊。
flex-end：與縱軸的終點對齊。
center：與縱軸的中點對齊。
space-between：與縱軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個縱軸。
項目屬性
Flex
該屬性有兩個快捷值：auto (1 1 auto) ，none (00 auto)。
Order
屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0
Flex-grow
flex-grow 定義彈性盒子元素的擴展比率 ，默認爲0，即如果存在剩餘空間，也不放大，如果所有項目的 flex-grow 屬性都爲1，則它們將等分剩餘空間（如果有的話）。如果一個項目的flex-grow 屬性爲2，其他項目都爲1，則前者佔據的剩餘空間將比其他項多一倍。
Flex-shrink
flex-shrink 屬性定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小，如果所有項目的 flex-shrink 屬性都爲1，當空間不足時，都將等比例縮小。如果一個項目的 flex- shrink 屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。負值對該屬性無效。
Flex-basis
flex-basis 定義彈性盒子元素的收縮比率，項目佔據的主軸空間（mainsize）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲 auto，即項目的本來大小。它可以設爲跟 width 或 height 屬性一樣的值（比如 350px），則項目將佔據固定空間。
Align-self
align-self 在彈性子元素上使用。覆蓋容器的 align-items 屬性。默認值爲 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。align-self 除了 auto，其他與 align-items 屬性基本一致。