今天通過騰訊的NEXT前端課程學到了一些flex布局的知識呀非，再加上在菜鳥網(wǎng)看到的一些燎孟，總結一下禽作。
2009年，W3C提出了一種新的方案—-Flex布局揩页，可以簡便、完整烹俗、響應式地實現(xiàn)各種頁面布局爆侣。目前，它已經(jīng)得到了所有瀏覽器的支持幢妄，現(xiàn)在能很安全地使用這項功能兔仰。[圖片上傳失敗...(image-56f8c8-1517580600637)]
- 任何一個容器都可以指定為Flex布局。
- 行內(nèi)元素也可以使用Flex布局
display: inline-flex;蕉鸳。 - Webkit內(nèi)核的瀏覽器乎赴，必須加上-webkit前綴。/Safari/
- 注：設為Flex布局以后潮尝，子元素的float榕吼、clear和vertical-align屬性將失效。
1.基本概念
2.屬性
（1）容器屬性
父容器定義display：flex勉失，即父容器可設置以下屬性：
-
flex-direction
決定主軸方向即項目排列方向羹蚣。
（1）row（默認值）：主軸為水平方向，起點在左端乱凿。（2）row-reverse：主軸為水平方向顽素，起點在右端。（3）column：主軸為垂直方向徒蟆，起點在上沿胁出。item自動根據(jù)container的高度調(diào)整自己的高度，如圖中示例段审，在其他設置均為默認的情況下全蝶，三個高為160px的item放在了高度為400px的container里。（4）column-reverse：主軸為垂直方向戚哎，起點在下沿裸诽。 -
flex-wrap
默認情況下，項目都排在一條線（又稱”軸線”）上型凳。flex-wrap屬性定義丈冬，如果一條軸線排不下，如何換行甘畅。
（1）nowrap（默認）：不換行埂蕊。在item本身的寬度之和大于container的寬度時往弓，在其他均為默認的情況下，item的寬度等于將container等分的寬度蓄氧。
（2）wrap：換行函似，第一行在上方。（換行后item總高度可能大于container高度）（3）wrap-reverse：換行喉童，第一行在下方撇寞。
注：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap堂氯。 -
justify-content
該屬性定義了項目在主軸上的對齊方式蔑担。
（1）flex-start（默認值）：左對齊（2）center：居中（3）flex-end：右對齊（4）space-around：每個項目兩側的間隔相等。也正因如此咽白，item之間的間隔比item與邊框的間隔大一倍啤握。（5）space-between：兩端對齊，項目之間的間隔都相等晶框。 -
align-items
align-items屬性定義項目在交叉軸上如何對齊排抬。
（1）flex-start：交叉軸的起點對齊。
（2）center：交叉軸的中點對齊授段。（3）flex-end：交叉軸的終點對齊蹲蒲。（4）stretch（默認值）：如果item未設置高度或設為auto，將占滿整個容器的高度畴蒲。如圖則是將item高度設為auto之后的示例悠鞍。（5）baseline: 項目的第一行文字的基線對齊。
附一張菜鳥教程的圖[圖片上傳失敗...(image-348ef7-1517580600638)] -
align-content
align-content屬性定義了多根軸線的對齊方式模燥。如果項目只有一根軸線咖祭，該屬性不起作用。
（1）stretch（默認值）：軸線占滿整個交叉軸蔫骂。（2）flex-start：與交叉軸的起點對齊么翰。（3）center：與交叉軸的中點對齊。（4）flex-end：與交叉軸的終點對齊辽旋。（5）space-around：每根軸線兩側的間隔都相等浩嫌。所以，軸線之間的間隔比軸線與邊框的間隔大一倍补胚。（6）space-between：與交叉軸兩端對齊码耐，軸線之間的間隔平均分布。
（2）item上的屬性
-
order
order屬性定義項目的排列順序溶其。數(shù)值越小骚腥，排列越靠前，默認為0瓶逃。 -
flex-grow屬性
flex-grow屬性定義項目的放大比例束铭，默認為0廓块，即如果存在剩余空間，也不放大契沫。
[圖片上傳失敗...(image-3c2009-1517580600638)] -
flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例带猴，默認為1，即如果空間不足懈万，該項目將縮小拴清。負值對該屬性無效。[圖片上傳失敗...(image-1550c0-1517580600638)] -
flex-basis屬性
flex-basis屬性定義了在分配多余空間之前钞速，項目占據(jù)的主軸空間（main size）贷掖。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間渴语。它的默認值為auto，即項目的本來大小昆咽。
注：flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫驾凶，默認值為0 1 auto。后兩個屬性可選掷酗。 -
align-self屬性
align-self屬性允許單個項目有與其他項目不一樣的對齊方式调违，可覆蓋align-items屬性（即優(yōu)先級高于父元素設置的align-items屬性）。默認值為auto泻轰，表示繼承父元素的align-items屬性技肩，如果沒有父元素，則等同于stretch浮声。
