一：display:flex 布局
display:flex 是一種布局方式驯镊。它即可以應(yīng)用于容器中锅锨，也可以應(yīng)用于行內(nèi)元素。是W3C提出的一種新的方案妆绞，可以簡便顺呕、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局括饶。目前株茶，它已經(jīng)得到了所有瀏覽器的支持。
Flex是Flexible Box的縮寫图焰，意為"彈性布局"启盛，用來為盒狀模型提供最大的靈活性。設(shè)為Flex布局以后技羔，子元素的float僵闯、clear和vertical-align屬性將失效。
二：flex的六個(gè)屬性
flex-direction 容器內(nèi)元素的排列方向(默認(rèn)橫向排列)
1：flex-direction:row; 沿水平主軸讓元素從左向右排列
1536039075.png
2：flex-direction:column; 讓元素沿垂直主軸從上到下垂直排列
1536039314(1).png
3：flex-direction:row-reverse;沿水平主軸讓元素從右向左排列
1536039460(1).png
flex-wrap 容器內(nèi)元素的換行(默認(rèn)不換行)
1：flex-wrap: nowrap; (默認(rèn))元素不換行,比如：一個(gè)div寬度100%藤滥，設(shè)置此屬性鳖粟，2個(gè)div寬度就自動變成各50%；
2：flex-wrap: wrap; 元素?fù)Q行,比如：一個(gè)div寬度100%拙绊，設(shè)置此屬性向图，第二個(gè)div就在第二行了；
justify-content 元素在主軸（頁面）上的排列
1：justify-content : center;元素在主軸（頁面）上居中排列
1536041764(1).png
2：justify-content : flex-start;元素在主軸（頁面）上由左或者上開始排列
1536041631(1).png
3：justify-content : flex-end;元素在主軸（頁面）上由右或者下開始排列
1536042053(1).png
4：justify-content : space-between;元素在主軸（頁面）上左右兩端或者上下兩端開始排列
1536042390(1).png
5：justify-content : space-around;每個(gè)元素兩側(cè)的間隔相等标沪。所以榄攀，元素之間的間隔比元素與邊框的間隔大一倍。
1536042636(1).png
align-items 元素在主軸（頁面）當(dāng)前行的橫軸（縱軸）方向上的對齊方式
1：align-items : flex-start; 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界（靠上對齊）金句。
1536043107(1).png
2：align-items : flex-end; 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界檩赢。（靠下對齊）
1536043238(1).png
3：align-items : center; 彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（居中對齊）
1536043373(1).png
4：align-items : baseline; 如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條违寞，則該值與'flex-start'等效贞瞒。其它情況下，該值將參與基線對齊坞靶。（靠上對齊）
align-content 在彈性容器內(nèi)的元素沒有占用交叉軸上所有可用的空間時(shí)對齊容器內(nèi)的各項(xiàng)（垂直）
#main{width:70px;height:300px;border:1pxsolid#c3c3c3;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-align-content: center;align-content: flex-start;}#maindiv{width:70px;height:70px;}
1：align-content: flex-start; 元素位于容器的開頭憔狞。各行向彈性盒容器的起始位置堆疊蝴悉。
1536046493(1).png
2:align-content: flex-end; 元素位于容器的結(jié)尾彰阴。各行向彈性盒容器的結(jié)尾位置堆疊。
1536046542(1).png
3:align-content: stretch; 元素位于容器的中心拍冠。各行向彈性盒容器的中間位置堆疊尿这。
1536046654(1).png
4:align-content: center; 默認(rèn)值簇抵。元素被拉伸以適應(yīng)容器。各行將會伸展以占用剩余的空間射众。如果剩余的空間是負(fù)數(shù)碟摆，該值等效于'flex-start'。
1536046771(1).png
5:align-content: space-between;元素位于各行之間留有空白的容器內(nèi)叨橱。各行在彈性盒容器中平均分布典蜕。
1536046899(1).png
6:align-content: space-around;元素位于各行之前、之間罗洗、之后都留有空白的容器內(nèi)愉舔。各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半伙菜。如果剩余的空間是負(fù)數(shù)或彈性盒容器中只有一行轩缤，該值等效于'center'。
1536047051(1).png
三：flex常見屬性總結(jié)
Positional alignment
justify-content: center; :居中排列
justify-content: flex-start; /* 從行首起始位置開始排列?/
justify-content: flex-end; /
?從行尾位置開始排列 */
