- 簡要介紹
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{
display: flex;
justify-content:center;
align-items:center;
}
可以看見如果使用了 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），則項目将占據固定空間。