一览妖、Flex布局是什么轧拄？
Flex是Flexible Box的縮寫，意為”彈性布局”讽膏，用來為盒狀模型提供最大的靈活性檩电。
任何一個容器都可以指定為Flex布局。
.box{? display: flex;}
行內(nèi)元素也可以使用Flex布局府树。
.box{? display: inline-flex;}
Webkit內(nèi)核的瀏覽器俐末，必須加上-webkit前綴。
.box{? display: -webkit-flex; /* Safari */? display: flex;}
注意奄侠，設(shè)為Flex布局以后卓箫，子元素的float、clear和vertical-align屬性將失效垄潮。
二烹卒、基本概念
采用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啤它。
三变骡、容器的屬性
以下6個屬性設(shè)置在容器上芭逝。
分別是：flex-direction????????flex-wrap ? ? ? flex-flow????????justify-content????????align-items????????align-content
1. ? ?flex-direction ? ? 決定主軸的方向（即項目的排列方向）
????????flex-direction: row | row-reverse | column | column-reverse;
????????它有四個值：
????????????????row（默認(rèn)值）：以X軸旬盯，從左開始排序。
????????????????row-reverse：以X軸接剩，從右開始排序搂漠。
????????????????column：以Y軸某弦，從左角上開始。
????????????????column-reverse：以Y軸怔毛，從左角下開始腾降。
2. ?flex-wrap ? ?默認(rèn)情況下，項目都排在一條線（又稱”軸線”）上螃壤。flex-wrap屬性定義，如果一條軸線排不下冤馏，如何換行逮光。
? ?????? flex-wrap: nowrap | wrap | wrap-reverse;
? ? ? ? 它有三個值：
? ??????????????nowrap（默認(rèn)）：不換行。
????????????????wrap：換行涕刚，第一行在上方杜漠。
? ??????????????wrap-reverse：換行，第一行在下方戴陡。
3. ?flex-flow
? ??????flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式（此值可調(diào)用前兩者的值）沟涨，默認(rèn)值為row nowrap裹赴。
4. ?justify-content ? 定義了項目在主軸上的對齊方式棋返。
? ?????? justify-content: flex-start | flex-end | center | space-between | space-around;
? ? ? ? 它有五個值：
? ??????????????flex-start（默認(rèn)值）：左對齊
????????????????flex-end：右對齊
????????????????center： 居中
????????????????space-between：兩端對齊邊框睛竣，項目之間的間隔都相等与境。
????????????????space-around：項目離邊框兩端相等的距離（假設(shè)距離為1）共屈，項目間隔是于邊框的距離兩倍（那么距離為2）。
????????????????space-evenly： 每個項目間隔相等暇务，距離邊框也相等括改，等分。
5. ?align-items? ??????定義項目在交叉軸上如何對齊。
????????align-items: flex-start | flex-end | center | baseline | stretch;
????????它可能取五個值（目前可能有八個值著拭，常用的可能只有三四個）：
? ??????????????flex-start：左上角對齊鄙币。
????????????????flex-end：左下角對齊被环。
????????????????center：延左邊框上下居中版姑。
????????????????baseline: 項目的第一行文字的基線對齊表制。
????????????????stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto壤短，將占滿整個容器的高度
6. ?align-content ?? ??????定義了多根軸線的對齊方式帘撰。如果項目只有一根軸線（即只有一行）相赁，該屬性不起作用婆赠。
? ?????? align-content: flex-start | flex-end | center | space-between | space-around | stretch;
? ? ? ? 該屬性可能取六個值：
? ??????????????flex-start：與交叉軸的起點對齊妙黍。
????????????????flex-end：與交叉軸的終點對齊。
????????????????center：與交叉軸的中點對齊怕品。
????????????????space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
????????????????space-around：每根軸線兩側(cè)的間隔都相等尤辱。所以厢岂，軸線之間的間隔比軸線與邊框的間隔大一倍。
????????????????stretch（默認(rèn)值）：軸線占滿整個交叉軸结借。
四船老、項目的屬性
以下6個屬性設(shè)置在項目上圃酵。? ??
分別是：order?? ??flex-grow ? ? ? flex-shrink????????flex-basis????????flex????????align-self
1.?flex ??
該屬性是 flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto薪韩。后兩個屬性可選捌锭。
????????auto等同于（flex-shrink：1）观谦；
2.??order? ??????定義項目的排列順序。數(shù)值越小捉偏，排列越靠前泻红，默認(rèn)為0。
????????order： integer ;
3. ?align-self? ?????
允許單個項目有與其他項目不一樣的對齊方式驻粟，可覆蓋align-items屬性蜀撑。默認(rèn)值為auto，表示繼承父元素的align-items屬性矿卑，如果沒有父元素沃饶，則等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
該屬性可能取6個值琴昆，除了auto馆揉，其他都與align-items屬性完全一致升酣。
（解釋以方便理解和觀看，不足之處望指出）
