1. Flex布局
Flex是Flexible Box 的縮寫铐姚，意為彈性布局锣吼。
任何一個容器都可以指定為Flex布局：
.box{
display: flex;
}
行內元素也可以使用Flex布局：
.box{
display: inline-flex;
}
暫時不明白的點：
Webkit的內核瀏覽器，必須加上-webkit前綴丐怯。.box{ display: -webkit-flex; /* Safari */ display: flex; }
2. 基本概念
采用Flex布局的元素名挥，稱為Flex容器（flex container）霜大。它的所有子元素自動成為容器成員，稱為Flex項目（flex item）捡絮。
image.png
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）燃领。
主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end锦援；
交叉軸的開始位置叫做cross start猛蔽，結束位置叫做cross end。
項目默認沿主軸排列灵寺。單個項目占據(jù)的主軸空間叫main size曼库，占據(jù)的交叉空間叫做cross size。
3.容器的屬性
容器有6個屬性：
flex-direction: // 確定主軸的方向(即flex item的排列方向)略板。
flex-wrap: // 確定換行的方式毁枯。
flex-flow：// flex-direction與flex-wrap的簡寫，默認值 row nowrap.
justify-content: // 確定flex item在主軸上的對齊方式叮称。
align-items: // 確定flex item在垂直的交叉軸上對齊方式种玛。
align-content: // 確定多根軸線的對齊方式藐鹤。如果只有一根軸線，該屬性不起作用赂韵。
3.1 flex-direction：主軸的方向
row(默認值): 主軸為水平方向娱节，從左到右排列，所有 flex item 排成一行祭示，默認寬度不夠時肄满，會撐大寬度。
column: 主軸方向為垂直方向质涛，從上到下排列稠歉，所有item排成一列。
row-reverse： 主軸為水平方向汇陆，從右到左排列怒炸，所有 flex item 排成一行，默認寬度不夠時毡代，會撐大寬度横媚。
column-reverse：主軸方向為垂直方向，從下到上排列月趟，所有item排成一列灯蝴。
3.2 flex-wrap：一條軸線放不下時，如何換行
nowrap（默認值） ：不換行孝宗。
wrap： 換行穷躁，第一行在上方。
wrap-reverse：換行因妇，第一行在下方问潭。
這里說明一下，如果主軸方向為垂直方向婚被，設置wrap與wrap-reverse其實沒有多大意義狡忙，我測試了一下，設置為wrap是flex item 在左邊址芯，從上到下一列灾茁。設置為wrap-reverse就變?yōu)橛疫吜耍彩且涣泄日āＶ饕蚴钱敵銎聊伙@示的高度時北专，會有滑動條出現(xiàn)，增大容器的高度旬陡。如果指定容器的高度拓颓，換行則是左右了。
3.3 flex-flow
flex-flow是 flex-direction屬性和flex-wrap屬性的簡寫形式描孟，默認值為row nowrap
3.4 justify-content：定義flex item在主軸上的對齊方式
flex-start(默認)：左對齊
flex-end： 右對齊
center： 居中
space-between：兩端對齊驶睦，項目之間的間隔都相等砰左。
space-around：兩個item兩側的間隔相等。
3.5 align-items： 定義flex item在交叉軸上如何對齊
flex-start：交叉軸的起點對齊场航。
flex-end：交叉軸的終點對齊缠导。
center：交叉軸的中點對齊。
baseline：flex item的第一行文字的基線對齊旗闽。
stretch(默認值)：如果flex item未設置高度，或者設置為auto蜜另，將占滿整個容器的高度适室。
3.6 align-content：定義多根軸線的對齊方式，如果只有一根軸線举瑰，該屬性不生效
flex-start：與交叉軸的起點對齊捣辆。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊此迅。
space-between：與交叉軸兩端對齊汽畴，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等耸序。所以忍些，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸坎怪。
4. flex item的屬性
order：定義item的排列順序罢坝。默認為0，數(shù)值越小搅窿，排列越考前嘁酿。
flex-grow：item的權重，即放大比例男应。默認為0闹司，即存在剩余空間也不放大。
flex-shrink：item的縮小比例沐飘。默認為1游桩，即如果空間不足，將縮小耐朴。 如果所有的item的flex-shrink都為1众弓，當空間不足時，將等比例縮小隔箍。負值對該屬性無效谓娃。flex-shrink為0時，將不縮小蜒滩。
flex-basis：定義分配多余空間之前滨达，item占據(jù)主軸的空間奶稠。默認值為auto，即本身的大小捡遍⌒慷可以設置為跟width或height一樣的值，即item將占據(jù)固定空間画株。
flex：是flex-grow辆飘，flex-shrink和flex-basis的簡寫，默認值為 0 1 auto谓传。 兩個快捷鍵 auto（1 1 auto）和none（0 0 auto）蜈项。
align-self：允許單個item與其他項目有不一樣的對齊方式，可以覆蓋align-items屬性续挟，默認值為auto紧卒，表示繼承父元素的align-items屬性，如果沒有父元素诗祸，則等同于stretch跑芳。
