flex 即為彈性布局。
任何乙個容器都可以指定為flex布局。
.box
行內元素可以使用flex布局
.box
webkit核心的瀏覽器必須加上-webkit 字首。
.box
注意：元素設定flex布局以後,子元素得float ,clear 和 vertical-align 屬性將失效。
基本概念：
採用flex布局的元素稱之為flex容器，它的所有子元素自動成為容器成員，稱為flex
專案。容器預設存在兩根軸，水平的主軸（main axis） 和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做 main start, 結束位置叫做 main end ；
交叉軸的開始位置叫做cross start,結束位置叫做 cross start,技術位置叫做 cross end.
單個專案佔據的主軸空間叫做 main size 佔據的交叉軸空間叫做cross size.
容器的屬性：
有6個屬性設定在容器上。
flex-direction flex-wrap flex-flow justify-content
align-items align-content
1.flex-direction
屬性決定主軸的方向（即專案的排列方向）
.box
row(預設值)主軸為水平方向，起點在左端。
row-reverse: 主軸為水平方向，起點在右端。
column: 主軸為垂直方向，起點在上沿。
column-reverse: 主軸為垂直方向，起點在下沿。
2.flex-wrap 屬性
預設情況下，專案都排列在一條線（又稱軸線）上，flex-wrap 屬性定義，如果一條軸線
排列不下，如何換行。
.box
nowrap （預設）： 不換行。
wrap: 換行，第一行在上方。
wrap-reverse: 換行，第一行在下方。
3.flex-flow
flex-flow 屬性是flex-direction 屬性和flex-wrap 屬性的簡寫方式，預設值為row nowrap.
.box
4.justify-content 屬性
屬性定義了專案在主軸上的對齊方式。
.box
5個值，具體對齊方式與軸的方向有關，下面假設主軸為從左到右。
flex-start(預設值) : 左對齊
flex-end 右對齊
center 居中
space-between: 兩端對齊，專案之間的間隔都相等。
space-around: 每個專案兩側的間距都相等，所以專案之間的間隔比專案與邊框的間隔大一倍。
5.align-items
屬性定義專案在交叉軸上如何對齊。
.box
可能取5個值，具體的對齊方式與交叉軸的方向有關，下面假設交叉軸上從上到下。
flex-start: 交叉軸的起點對齊。
flex-end: 交叉軸的終點對齊。
center: 交叉周的中點對齊。
baseline：專案的第一行文字的基線對齊。
stretch (預設值) 如果專案未設定高度或設定auto,將佔滿整個容器的高度。
6.align-content 屬性
屬性定義了多根軸線的對齊方式，如果專案只能有一根軸線，該屬性不起作用。
.box
屬性可取6個值。
flex-start: 與交叉軸的起點對齊。
flex-end: 與交叉軸的終點對齊。
center: 與交叉軸的中點對齊。
space-between；與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around: 每根軸線兩側的間隔都相等。
stretch(預設值)：軸線佔滿整個交叉軸。
專案的屬性
可以設定6個屬性在專案上。
order flex-grow flex-shrink flex-basis flex align-self
1.order屬性
order 屬性定義專案的排列順序，數值最小，排列越靠前，預設為o.
.item
2.flex-grow 屬性
flex-grow 屬性定義專案的放大比例，預設為0,即如果存在剩餘空間，也放大。
.item
如果所有專案的flex-grow 屬相都為1，它們將登封剩餘空間，如果乙個專案的
flex-grow 屬性為2, 其他專案都為1 則前者佔據的剩餘空間將比其他專案多一倍。
3.flex-shrink 屬性
flex-shrink 屬性定義專案的縮小比例，預設為1,即空間不足，該專案將縮小。
.item
如果所有的專案flex-shrink 屬性都為1 ，當空間不足時，都將等比例縮小。
如果乙個專案的flex-shrink屬性為o,其他專案都為1，則空間不足時，前者
不縮小。負值對該屬性無效。
4.flex-basis 屬性
屬性定義了在分配多餘空間之前，專案佔據的主軸空間，瀏覽器根據這個屬性，計算
主軸是否有多餘空間。它的預設值為 auto,即專案的本來大小。
.item
他可以設為跟width 或 height 屬性一些樣的值，則專案將佔據固定空間。
5.flex 屬性
flex 屬性是flex-grow. flex-shrink 和 flex 和 flex-basis 的簡寫，預設值
為 0 1 auto. 後兩個屬性可選。
.item
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，
因為瀏覽器會推算相關值
6.align-self 屬性
align-self 屬性允許單個專案有與其它專案不一樣的對齊方式，可以
覆蓋align 屬性，預設值為auto, 表示繼承父元素的align-items屬性
如果沒有父元素，則等於stretch.
.item
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...
第二遍回顧 前端flex布局
1.flex 彎曲，收縮 2.概念 2條主軸，main axis,cross axis 每個單元為flex item，主軸空間main size，交叉軸空間cross size 3.容器 container display flex inline flex 塊狀元素用flex 行內元素用inline...
布局（flex布局）
彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...