布局的傳統(tǒng)解決方案竟趾，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性宫峦。它對于那些特殊布局非常不方便岔帽，比如，垂直居中就不容易實現(xiàn)导绷。
Flex是Flexible Box的縮寫犀勒，意為"彈性布局"，用來為盒狀模型提供最大的靈活性妥曲。
任何一個容器都可以指定為Flex布局贾费。
.box{
display: flex;
// display: inline-flex;
}
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，設(shè)為Flex布局以后檐盟，子元素的float褂萧、clear和vertical-align屬性將失效。
采用Flex布局的元素葵萎，稱為Flex容器（flex container）导犹，簡稱"容器"。它的所有子元素自動成為容器成員羡忘，稱為Flex項目（flex item）谎痢，簡稱"項目"。
容器的屬性
- flex-direction:
- row（默認(rèn)值）：主軸為水平方向卷雕，起點在左端节猿。
- row-reverse：主軸為水平方向，起點在右端漫雕。
- column：主軸為垂直方向滨嘱，起點在上沿。
- column-reverse：主軸為垂直方向蝎亚，起點在下沿九孩。
flex-wrap:
nowrap | wrap | wrap-reverseflex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式先馆，默認(rèn)值為row nowrap发框。justify-content
- flex-start（默認(rèn)值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側(cè)的間隔相等梅惯。所以宪拥，項目之間的間隔比項目與邊框的間隔大一倍。
- align-items
- flex-start：交叉軸的起點對齊铣减。
- flex-end：交叉軸的終點對齊她君。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊葫哗。
- stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto缔刹，將占滿整個容器的高度。
- align-content 屬性定義了多根軸線的對齊方式劣针。如果項目只有一根軸線校镐，該屬性不起作用。
- flex-start：與交叉軸的起點對齊捺典。
- flex-end：與交叉軸的終點對齊鸟廓。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊襟己，軸線之間的間隔平均分布引谜。
- space-around：每根軸線兩側(cè)的間隔都相等。所以擎浴，軸線之間的間隔比軸線與邊框的間隔大一倍员咽。
- stretch（默認(rèn)值）：軸線占滿整個交叉軸。
項目的屬性
- order 屬性定義項目的排列順序贮预。數(shù)值越小骏融，排列越靠前，默認(rèn)為0萌狂。
- flex-grow 定義項目的放大比例档玻，默認(rèn)為0，即如果存在剩余空間茫藏，也不放大误趴。0 為默認(rèn)不放大，為文本本身的長度务傲，如果沒有則不顯示
- flex-shrink 屬性定義了項目的縮小比例凉当，默認(rèn)為1，即如果空間不足售葡，該項目將縮小看杭。1 為默認(rèn)，為原始大小挟伙，
- flex-basis 屬性定義了在分配多余空間之前楼雹，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間贮缅。它的默認(rèn)值為auto榨咐，即項目的本來大小
- flex flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 0 auto谴供。后兩個屬性可選块茁。
- align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性桂肌。默認(rèn)值為auto数焊，表示繼承父元素的align-items屬性，如果沒有父元素崎场，則等同于stretch昌跌。
- margin : auto 設(shè)置"margin"值為"auto"值，自動獲取彈性容器中剩余的空間照雁。所以設(shè)置垂直方向margin值為"auto"蚕愤。可以使彈性子元素在彈性容器的兩上軸方向都完全集中饺蚊。
以下實例在第一個彈性子元素上設(shè)置了 margin-right: auto; 纸泄。 它將剩余的空間放置在元素的右側(cè)：
flex ：默認(rèn) 0 1 auto ; auto<=> " 1 1 auto "; none<=> "0 0 auto"
參考一下代碼壳嚎，分別改變flex的三個值，去理解其中三個值的含義。
當(dāng)總長度-去flex-basis的值之后馅扣，根據(jù)剩余的空間或者縮小比例 來改變grow或者shrink的值静秆。
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex: 0 1 80px;
}
#main div:nth-of-type(5) {
flex: 0 1 30px;
}
flex-grow :
flex-shrink:
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:khaki;">3</div>
<div style="background-color:pink;">4</div>
<div style="background-color:lightgrey;">5</div>
</div>
