一、彈性布局
布局類型：
1、浮動(dòng)+定位
2、自適應(yīng)（百分比）
3、響應(yīng)式布局
4、彈性布局（flex布局）
彈性布局的優(yōu)缺點(diǎn)：
1、優(yōu)點(diǎn)：兼容性支持所有瀏覽器（Webkit內(nèi)核的瀏覽器要加上-webkit-），可以隨用戶的喜好進(jìn)行調(diào)節(jié)，可以將任何一個(gè)容器指定為Flex布局；
2、缺點(diǎn)：彈性布局較復(fù)雜，需兼容IE6；
注意：當(dāng)使用了彈性布局，在css中的float、clear和vertical-align就會(huì)失效
二、彈性布局的屬性
1、flex-direction彈布局方向即容器方向
row：默認(rèn)方向，從左到右
row-reverse：從右向左
column：從上到下
column-reverse：從下到上
2、flex-wrap換行
nowrap：默認(rèn)不換行
wrap：向下?lián)Q行
wrap-reverse：向上換行
3、flex-flow方向和換行的簡(jiǎn)寫
例如，flex-flow：row nowrap；
4、justify-content容器方向上的對(duì)齊方式
flex-start：默認(rèn)向左對(duì)齊
flex-end：向右對(duì)齊
center：居中對(duì)齊
space-between：兩端對(duì)齊，子元素之間有間隔，子元素與邊框之間無(wú)間隔
space-around：每個(gè)子元素兩側(cè)的間隔相等。子元素之間的間隔比子元素與容器邊框的間隔大一倍
5、align-items默認(rèn)垂直容器方向上的對(duì)齊方式
flex-start：垂直方向的起點(diǎn)對(duì)齊
flex-end：垂直方向的終點(diǎn)對(duì)齊
center：垂直方向的中點(diǎn)對(duì)齊
baseline：與第一個(gè)子元素中文字的基線對(duì)齊
stretch（默認(rèn)值）：如果子元素沒有設(shè)置高度或者高度設(shè)為auto，那么它將占滿整個(gè)容器的高度
6、align-content子元素兩種方向上的對(duì)齊
flex-start：當(dāng)容器方向子元素剛好填滿時(shí)，與垂直方向的起點(diǎn)對(duì)齊
flex-end：當(dāng)容器方向子元素剛好填滿時(shí)，與垂直方向的終點(diǎn)對(duì)齊
center：當(dāng)容器方向子元素剛好填滿時(shí)，與垂直方向的中點(diǎn)對(duì)齊
space-between：當(dāng)容器方向子元素剛好填滿時(shí)，垂直方向兩端對(duì)齊，子元素之間的等間距間隔
space-around：兩個(gè)方向兩側(cè)的間隔都相等。所以軸線之間的間隔比軸線與邊框的間隔大一倍
stretch（默認(rèn)值）：沾滿整個(gè)垂直方向
三、子元素的屬性
1、order排序，integer（整數(shù)），數(shù)值小的在前面
2、flex-grow放大比例，number，默認(rèn)值為0
3、flex-shrink縮小比例，number，默認(rèn)值為1
注：給所有子元素設(shè)置該屬性為1，當(dāng)空間不足時(shí)，所有子元素將等比例縮小平分所有空間。如果單獨(dú)給某個(gè)子元素設(shè)置為0，那么該子元素將空間不足時(shí)不縮小。
4、flex-basis屬性
該屬性定義了給子元素分配空間時(shí)其占據(jù)的空間為多少，可以設(shè)置為與其width和height屬性一樣的值，那么它將被分配固定的空間大小。
5、flex屬性：flex-grow、flex-shrink和flex-basis的簡(jiǎn)寫
6、align-self屬性
該屬性允許設(shè)置過(guò)額子元素有與其他子元素不一樣的對(duì)齊方式，可以覆蓋align-items屬性
auto（默認(rèn)值）：表示默認(rèn)繼承父級(jí)的align-items屬性
flex-start：垂直方向的起點(diǎn)對(duì)齊
flex-end：垂直方向的終點(diǎn)對(duì)齊
center：垂直方向的中點(diǎn)對(duì)齊
baseline：與第一個(gè)子元素中文字的基線對(duì)齊
stretch（默認(rèn)值）：如果子元素沒有設(shè)置高度或者高度設(shè)為auto，那么它將占滿整個(gè)容器的高度
