原本最近心里五味雜陳羽历、亂七八糟的焊虏，有許多想說(shuō)卻不知道怎么說(shuō)的感受。忙著復(fù)習(xí)秕磷，實(shí)訓(xùn)诵闭，趕著做網(wǎng)頁(yè)，一些小小的東西總是會(huì)打斷原有計(jì)劃澎嚣，讓你沒(méi)有辦法必須去把一件一件的事情做完疏尿。在別人的眼里，不知道早就抱怨到哪里去了易桃，其實(shí)褥琐，我也會(huì)偶爾會(huì)選擇抱怨，但是我會(huì)盡量讓自己有顆強(qiáng)大的內(nèi)心颈抚，相信自己可以的踩衩。但是，這種“自信”久了也就想懶惰了贩汉，要不我也放松下，要不我也出去玩玩锚赤。后來(lái)匹舞，想了想，這些安逸舒服的生活线脚，為什么不把它放在幾十年后來(lái)度過(guò)〈突現(xiàn)在叫榕，最重要的是什么就去做什么，頂住壓力姊舵，繼續(xù)前行吧晰绎！ps:小小牢騷了一下，我們繼續(xù)掃除CSS障礙括丁！
（一）flex 布局
布局的傳統(tǒng)解決方案荞下，基于盒狀模型，依賴(lài) display屬性 + position屬性 + float屬性史飞。它對(duì)于那些特殊布局非常不方便尖昏，比如，垂直居中就不容易實(shí)現(xiàn)构资。
1. Flex布局是什么呢抽诉？
網(wǎng)上有很多關(guān)于Flex的教程，對(duì)于Flex的叫法也不一吐绵，有的叫Flexbox迹淌，有的叫Flex，其實(shí)這兩種叫法都沒(méi)有錯(cuò)己单，只是Flexbox舊一點(diǎn)巍沙，而Flex是剛出來(lái)不久的東西而已，為了方便說(shuō)明荷鼠，趕上新技術(shù)句携，下面我就把這種布局叫Flex布局。
Flex是Flexible Box的縮寫(xiě)允乐，意為"彈性布局"矮嫉，用來(lái)為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局牍疏。
.box1{
display: flex;
}
.box2{
display: inline-flex; <span style="font-family: Arial, Helvetica, sans-serif;"></span>
/*</span><span style="font-family: Arial, Helvetica, sans-serif;">行內(nèi)元素也可以使用Flex布局蠢笋。*/
}
.box3{
display: -webkit-flex;
/* Safari ,Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴鳞陨。-webkit昨寞，指的是高速模式*/
display: flex;
}
注意，設(shè)為Flex布局以后厦滤，子元素的float援岩、clear和vertical-align屬性將失效。
2. 基本概念
采用Flex布局的元素掏导，稱(chēng)為Flex容器（flex container）享怀，簡(jiǎn)稱(chēng)"容器"。它的所有子元素自動(dòng)成為容器成員趟咆，稱(chēng)為Flex項(xiàng)目（flex item）添瓷，簡(jiǎn)稱(chēng)"項(xiàng)目"梅屉。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start鳞贷，結(jié)束位置叫做main end坯汤；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end搀愧。
項(xiàng)目默認(rèn)沿主軸排列惰聂。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size妈橄。
3.容器的屬性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction屬性
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）庶近。
row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端眷蚓。
row-reverse：主軸為水平方向鼻种，起點(diǎn)在右端。
column：主軸為垂直方向沙热，起點(diǎn)在上沿叉钥。
column-reverse：主軸為垂直方向，起點(diǎn)在下沿篙贸。
3.2 flex-wrap屬性
默認(rèn)情況下投队，項(xiàng)目都排在一條線(xiàn)（又稱(chēng)"軸線(xiàn)"）上。flex-wrap屬性定義爵川，如果一條軸線(xiàn)排不下敷鸦，如何換行。
（1）nowrap（默認(rèn)）：不換行寝贡。
（2）wrap：換行扒披，第一行在上方。
（3）wrap-reverse：換行圃泡，第一行在下方碟案。
3.3 flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap颇蜡。
3.4 justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式价说。
flex-start（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等风秤。
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等鳖目。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍唁情。
3.5 align-items屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊
flex-start：交叉軸的起點(diǎn)對(duì)齊疑苔。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
center：交叉軸的中點(diǎn)對(duì)齊甸鸟。
baseline: 項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊惦费。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度抢韭。
3.6 align-content屬性
align-content屬性定義了多根軸線(xiàn)的對(duì)齊方式薪贫。如果項(xiàng)目只有一根軸線(xiàn)，該屬性不起作用刻恭。
flex-start：與交叉軸的起點(diǎn)對(duì)齊瞧省。
flex-end：與交叉軸的終點(diǎn)對(duì)齊。
center：與交叉軸的中點(diǎn)對(duì)齊鳍贾。
space-between：與交叉軸兩端對(duì)齊鞍匾，軸線(xiàn)之間的間隔平均分布。
space-around：每根軸線(xiàn)兩側(cè)的間隔都相等骑科。所以橡淑，軸線(xiàn)之間的間隔比軸線(xiàn)與邊框的間隔大一倍。
stretch（默認(rèn)值）：軸線(xiàn)占滿(mǎn)整個(gè)交叉軸咆爽。
以下是項(xiàng)目的屬性梁棠，是設(shè)置在項(xiàng)目上面的
（四）項(xiàng)目的屬性
以下6個(gè)屬性設(shè)置在項(xiàng)目上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.1 order屬性
order屬性定義項(xiàng)目的排列順序斗埂。數(shù)值越小符糊，排列越靠前，默認(rèn)為0呛凶。
4.2 flex-grow屬性
flex-grow屬性定義項(xiàng)目的放大比例男娄，默認(rèn)為0，即如果存在剩余空間漾稀，也不放大模闲。
如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話(huà)）县好。如果一個(gè)項(xiàng)目的flex-grow屬性為2围橡，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍缕贡。
4.3 flex-shrink屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例翁授，默認(rèn)為1，即如果空間不足晾咪，該項(xiàng)目將縮小收擦。
如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)谍倦，都將等比例縮小塞赂。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1昼蛀，則空間不足時(shí)宴猾，前者不縮小圆存。
負(fù)值對(duì)該屬性無(wú)效。
4.4 flex-basis屬性
flex-basis屬性定義了在分配多余空間之前仇哆，項(xiàng)目占據(jù)的主軸空間（main size）沦辙。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間讹剔。它的默認(rèn)值為auto油讯，即項(xiàng)目的本來(lái)大小。
它可以設(shè)為跟width或height屬性一樣的值（比如350px）延欠，則項(xiàng)目將占據(jù)固定空間陌兑。
4.5 flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto由捎。后兩個(gè)屬性可選兔综。
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優(yōu)先使用這個(gè)屬性隅俘，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性邻奠，因?yàn)闉g覽器會(huì)推算相關(guān)值。
4.6 align-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式为居，可覆蓋align-items屬性碌宴。默認(rèn)值為auto，表示繼承父元素的align-items屬性蒙畴，如果沒(méi)有父元素贰镣，則等同于stretch。
該屬性可能取6個(gè)值膳凝，除了auto碑隆，其他都與align-items屬性完全一致。
大部分轉(zhuǎn)載于http://blog.csdn.net/linda_417/article/details/51507176
