1.什么是Flex布局文捶？可以理解為一種新的盒模型：可伸縮的盒模型荷逞。是由css3規(guī)范提出的，在原有的block粹排，inline种远，inline-block的基礎(chǔ)延伸出的新布局。
2.Flex布局兼容性也是很好顽耳，看圖：
3.基本概念
采用 Flex 布局的元素坠敷，稱為 Flex 容器（flex container），簡稱"容器"射富。它的所有子元素自動成為容器成員膝迎，稱為 Flex 項目（flex item），簡稱"項目"胰耗。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）弄抬。主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end宪郊；交叉軸的開始位置叫做cross start掂恕，結(jié)束位置叫做cross end。
項目默認(rèn)沿主軸排列弛槐。單個項目占據(jù)的主軸空間叫做main size懊亡，占據(jù)的交叉軸空間叫做cross size。
HTML：
<div id="box">
<div id="item1">item1</div>
<div id="item2">item2</div>
<div id="item3">item3</div>
</div>
style：
#box{
width: 1000px;
height: 400px;
display: flex;
text-align: center;
line-height:300px;
}
#item1{
flex:1;
background-color: yellow;
}
#item2{
flex:1;
background-color: red;
}
#item3{
flex:2;
background-color: blue;
}
運行結(jié)果
只需要為容器（父容器）設(shè)置display：flex 或 inline-flex 乎串；項目（子容器）設(shè)置比例flex：number就能按比例平分容器的空間店枣。
4.容器的屬性
.flex-direction
.flex-wrap
.flex-flow
.justify-content
.align-items
.align-content
4.1 flex-direction決定主軸的方向（即項目排列方向）
#box{
flex-direction: row | row-reverse | column | column-reverse
}
4.2 flex-wrap 如果一行排不下，如何換行
#box{
flex-wrap:nowrap | wrap | wrap-reverse
}
（1）nowrap（默認(rèn)）:不換行，不夠按比例壓縮
（2）wrap:換行鸯两，第一行在上方
(3)wrap-reverse:換行闷旧，第一行在下方
4.3 flex-flow 是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap.
#box{
flex-flow:row-reverse wrap-reverse;
}
4.4 justify-content 屬性定義了項目在主軸上的對齊方式(項目的對齊方式)
#box{
justify-content:flex-start | flex-end | center | space-between | space-around;
}
.flex-start: 左對齊;
.flex-end: 右對齊;
.center: 居中;
.space-between: 兩端對齊钧唐，項目之間的間隔都相等;
.space-around: 每個項目兩側(cè)的間隔相等忙灼。所以，項目之間的間隔比項目與邊框的間隔大一倍;
4.5 align-items 改變次軸的對齊方式（項目的對齊方式）
#box{
align-items: flex-start | flex-end | center | baseline | stretch;
}
.flex-start：交叉軸的起點對齊(頂部對齊);
.flex-end：交叉軸的終點對齊（底部對齊）;
.center：交叉軸的中點對齊（垂直居中）;
.baseline: 項目的第一行文字的基線對齊（不是很理解）;
.stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto钝侠，將占滿整個容器的高度（不是很理解）;
5.項目屬性
.order //屬性定義項目的排列順序该园。數(shù)值越小，排列越靠前帅韧，默認(rèn)為0
.flex-grow //屬性定義項目的放大比例里初，默認(rèn)為0，即如果存在剩余空間忽舟，也不放大双妨。
.flex-shrink //屬性定義了項目的縮小比例，默認(rèn)為1叮阅，即如果空間不足斥难，該項目將縮小
.flex-basis //屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）帘饶。瀏覽器根據(jù)這個屬性哑诊，計算主軸是否有多余空間。它的默認(rèn)值為auto及刻，即項目的本來大小镀裤。
.flex //flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto缴饭。后兩個屬性可選
.align-self //align-self屬性允許單個項目有與其他項目不一樣的對齊方式暑劝，可覆蓋align-items屬性。默認(rèn)值為auto颗搂，表示繼承父元素的align-items屬性担猛，如果沒有父元素，則等同于stretch
阮一峰老師的教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
