Flex布局又名彈性布局案疲，相比float+position布局寂汇，具有很強大的靈活性罐呼，而且目前已經(jīng)得到了所有瀏覽器的兼容。
個人認為flex布局非常靈活好用继控，所以這里參考了阮一峰老師的flex教程以及NEXT課程中的文檔械馆，把flex布局的所有屬性知識點自己動手實現(xiàn)一遍并總結(jié)胖眷。
Flex布局的使用
如果想要使用Flex布局，首先需要給容器指定Flex布局霹崎。
display: flex;
display: inline-flex; //行內(nèi)元素也可使用
display: -webkit-flex //Webkit瀏覽器內(nèi)核需要加上前綴
在使用了flex布局之后瘦材，float，clear仿畸，vertical-align將失效食棕。
Flex布局的基本概念
flex布局中枢希，有兩個基本概念：
- 容器（flex container）
- 項目（flex item）
如圖所示（圖片來源網(wǎng)絡）：
由圖可見翼岁，容器中有兩根主軸：
- 水平主軸（main axis）
- 開始位置（main start）
- 結(jié)束位置（main end）
- 垂直交叉軸（cross axis）
- 開始位置（cross start）
- 結(jié)束位置（cross end）
在容器中，項目默認沿著主軸排列罗晕，單個項目占據(jù)主軸空間叫做（main size）千埃，占據(jù)的交叉軸空間叫做（cross size）憔儿。
容器（flex container）的屬性
容器屬性有6個：
1. flex-direction
- flex-direction決定了主軸的方向，也就是item排列的方向放可，有4個值：
-
row（默認值）：主軸為水平方向谒臼，左端為起點
-
row-reverse：主軸為水平方向，右端為起點
-
-
column：主軸為垂直方向耀里，上沿為起點
-
column-reverse：主軸為垂直方向蜈缤，下沿為起點
2. flex-wrap
- flex-wrap屬性是規(guī)定當一條軸線排列不下item的時候，該如何換行冯挎。（item在默認情況下是按照軸線排列成一條線）底哥，有三個值：
-
nowrap（默認值）：不換行
-
wrap：換行，第一行在上方
-
wrap-reverse：換行房官，第一行在下方
-
3.flex-flow
- flex-flow是前兩種屬性的簡寫方式趾徽，可以寫成如下形式：
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4. justify-content
- justify-content定義了item在主軸上的對齊方式，可能取5個值
-
flex-start（默認值）：左對齊
-
flex-end：右對齊
-
center：居中
-
space-between：兩端對齊翰守，項目之間間隔都相等
-
space-around：每個項目兩側(cè)的間隔相等孵奶。所以項目之間的間隔比項目與邊框的間隔大一倍。
-
5. alien-items
alien-items定義item在交叉軸上如何對齊（此時交叉軸方向為從上至下）蜡峰，有5個值：
-
flex-start：交叉軸的起點對齊
-
flex-end：交叉軸的終點對齊
-
center：交叉軸的中點對齊
-
baseline：項目的第一行文字的基線對齊
這里有一個問題：基線（base line）并不是漢字文字的下端沿了袁，而是英文字母“x”的下端沿。
-
stretch（默認值）：如果item未設置高度或者設置成auto事示，將占滿整個容器寬度
6.align-content
align-content定義了多跟軸線的對齊方式早像，如果item只有一根軸線僻肖，該屬性不起作用肖爵，有6個值：
-
flex-start：與交叉軸的起點對齊
-
flex-end：與交叉軸的終點對齊
-
center：與交叉軸的中點對齊
-
space-between：與交叉軸兩端對齊，軸線之間間隔平均分布
-
space-around：每根軸線兩側(cè)的間隔都相等臀脏，所以軸線之間的間隔比軸線與邊框的間隔大一倍
-
stretch（默認值）：軸線占滿整個交叉軸
item（子元素）的屬性
item的屬性有6個：
- order：定義item的排列順序劝堪，數(shù)值越小排列越靠前冀自，默認為0。
例如：
將所有item的order屬性設置為6秒啦、5熬粗、4、3余境、2驻呐、1
.item6{
order：6
}
//以此類推
*flex-grow：定義item的放大比例，默認為0芳来，也就是如果有剩余空間含末，也不放大。
例如：
設置item1的flex-grow屬性為2即舌，其余為默認值佣盒。
.item1{
flex-grow：2;
}
- flex-shrink：定義item的縮小比例，默認為1顽聂，也就是空間不足的時候肥惭，此item會縮小。
例如：
給item5設置了flex-shrink屬性為0紊搪，其他item皆為默認值1蜜葱，在空間不足的時候，它不縮小耀石。
.item {
flex-shrink：0;
}
- flex-basis:定義了在分配多余空間之前笼沥，項目占據(jù)的株洲空間。然后瀏覽器根據(jù)這個屬性來計算主軸是否有多余的空間娶牌。默認值為auto奔浅，即item本來的大小。
例如诗良，給item5設置flex-basis屬性為100px：
.item5 {
flex-basis：150px;
}
- flex:這個屬性是前幾種屬性的簡寫汹桦，默認值為0 1 auto ，后兩個可選鉴裹。
例如：
item5 {
flex : flex: 2 2 10%;
}
- align-self：允許單個item和其他item有不一樣的對齊方式舞骆，可覆蓋align-items屬性，默認值為auto径荔，表示繼承父元素的align-items屬性督禽，如果沒有則等同于stretch。
和align-items類似总处，同樣有以下幾種值： - auto
- flex-start
- flex-end
- center
- baseline
- stretch
參考資料：
我的個人博客：http://chronosblog.top
我的微信公眾號：runtustory
CSS布局詳解系列筆記索引：
