彈性布局可以簡潔、完整寓搬、響應式的實現(xiàn)各種頁面布局假丧。
Flexbox主要功能：
- 屏幕和瀏覽器窗口大小變化也可以靈活調(diào)整布局
- 指定伸縮元素沿著主軸或者側(cè)軸双揪，按照一定比例分配額外的空間，調(diào)整伸縮元素的大小
- 指定伸縮元素沿著主軸或者側(cè)軸包帚，把伸縮元素額外空間分配到伸縮元素之前渔期、之后和之間
- 控制元素在頁面上的布局方向
- 指定如何將垂直于元素布局軸的額外空間分配到該元素的周邊
- 按照不同文檔對象模型（DOM），指定排序方式對屏幕上元素重新排序【瀏覽器渲染中不按照文檔流先后順序重排伸縮元素】
主軸和側(cè)軸
用戶沿著一個伸縮容器的主軸配置伸縮元素渴邦，主軸是水平還是垂直的取決于justify-content屬性
只需要在父元素設置為flex布局即可：display:felx或者display:inline-flex疯趟。那其子元素的float、clear和vertical-align的屬性就無效几莽，父元素成為flex容器迅办，就默認了父容器里面只有一行。
html:
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
css:
.wrapper {
display: flex;
/* 設置主軸的方向 column垂直章蚣、flex水平*/
flex-direction: column;
}
.wrapper div {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: red;
color: #ffffff;
margin: 10px;
}
flex容器有6個屬性：
| 屬性 | 說明 |
|---|---|
| flex-direction | 決定了彈性容器子元素的排列方式 |
| flex-wrap | 設置了彈性容器超出時站欺，是否換行 |
| flex-flow | flex-direction 和 flex-wrap 的簡寫 |
| align-items | 設置彈性容器的子元素在縱軸方向的對齊方式 |
| align-content | 和align-items,但不設置子元素對齊，只是設置行對齊 |
| justify-content | 設置彈性容器子元素在主軸（橫軸）方向上的對齊方式 |
1纤垂、flex-direction：決定主軸的方向矾策，就是子元素的排列方向。在一個容器內(nèi)無非就是四種排列方向：
第一種起點在左端的水平方向峭沦，則屬性值為row贾虽，也是flex-direction屬性的默認值；
第二種就是起點在右端的水平方向吼鱼，則屬性值為row-reverse蓬豁；
第三種是起點在上端的垂直方向，則屬性值是column菇肃；
第四種是起點在下端的垂直方向地粪，則屬性值是column-reverse。
flex-direction:row || row-reverse || column || column-reverse
2琐谤、flex-wrap：在默認的情況下蟆技，flex容器的子元素的是排列成一行的，flex-wrap屬性定義在一行排不完時，如何換行质礼，是否換行旺聚。有三個屬性值：
nowrap:不換行
wrap：換行 ，多余的子元素排在第一行的下方
wrap-reverse：換行眶蕉，多余的子元素排在第一行的上方砰粹。
flex-wrap:wrap || wrap-reverse || nowrap
3、flex-flow：是flex-direction屬性和flex-wrap屬性的簡寫妻坝，默認值：row
nowrap 伸眶。
第一個屬性值表示flex-direction屬性值，第二個屬性值表示flex-wrap屬性值刽宪。
flex-flow:flex wrap
4厘贼、justify-content：該屬性定義了子元素在主軸方向的對齊方式，有五個屬性值供選擇：
| 屬性值 | 描述 |
|---|---|
| flex-start | 默認值圣拄，左對齊 |
| flex-end | 右對齊 |
| center | 居中 |
| space-between | 兩端對齊 |
| space-around | 每個子元素對兩側(cè)的間距相等嘴秸，那么每兩個子元素的間距是子元素與邊框間距的兩倍。 |
5庇谆、側(cè)軸對齊align-items和align-self：定義子元素在側(cè)軸上的對齊方式岳掐，有五個屬性值：
| 屬性值 | 描述 |
|---|---|
| flex-start | 側(cè)軸起點對齊 |
| flex-end | 側(cè)軸終點對齊 |
| center | 側(cè)軸中點對齊 |
| baseline | 就是子元素的第一行文字基線對齊 |
| stretch | 默認值，若是子元素沒有設置高度或者是auto的話饭耳，那子元素就沾滿容器的高度 |
6串述、align-content（堆棧伸縮行）：定義了多軸對齊方式，若是子元素只有一根軸線的話寞肖，align-content屬性就不起作用了纲酗，有6個屬性值：
| 屬性值 | 描述 |
|---|---|
| flex-start | 與交叉軸的起點對齊 |
| flex-end | 與交叉軸的終點對齊 |
| center | 與交叉軸的中點對齊 |
| space-between | 與交叉軸兩端對齊，軸線之間的間隔平均分布 |
| space-around | 每根軸線兩側(cè)的間距相等新蟆。 |
| stretch | 默認值觅赊，軸線占滿整個交叉軸 |
伸縮性 flex
伸縮容器按照比例給各個伸縮元素分配額外空間
對齊的不是伸縮元素，而是伸縮行
flex-grow:1;//每一個伸縮元素平均分配額外空間琼稻，如果設置為2吮螺，那么該元素所占的額外空間是其他元素的2倍
flex-shrink:1;//定義元素的收縮能力
.wrapper {
display: flex;
border: 1px solid red;
}
.wrapper div {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: red;
color: #ffffff;
margin: 10px;
}
.wrapper div:nth-child(1){
flex: 1;
}
.wrapper div:nth-child(2){
flex: 2;
}
.wrapper >div:nth-child(3){
flex: 3;
}
子元素有六個屬性可以設置：
order：定義了子元素的排列順序，數(shù)值越小帕翻，就越是靠前
flex-grow：定義子元素放大的比例鸠补，默認值是0
flex-shrink：定義了子元素的縮小比例，默認值是1嘀掸，就是剩余空間不足莫鸭，該子元素就會縮小，若有一個子元素 flex-shrink屬性設置為0横殴，其他都是1的話，那么在剩余空間不足的時候，該子元素不變衫仑，其他子元素等比例縮小
flex-basis：定義了子元素在分配剩余空間的時候梨与，該子元素占據(jù)主軸的空間，默認值auto文狱，就是該子元素本來的空間大小粥鞋，也可以設置成具體的數(shù)值（200px），表示該子元素的固定空間大小瞄崇。
flex：是flex-grow, flex-shrink 和 flex-basis屬性的簡寫呻粹，默認值是：0 1 auto。若是設置為auto苏研，則表示為 1 1 auto等浊；設置為none,則表示為 0 0 auto
align-self：定義了該元素與其他元素的不一樣的對齊方式，覆蓋了align-items屬性摹蘑，默認值auto筹燕，表示繼承父元素的align-items的屬性值，若沒有父元素衅鹿，則是等同于stretch撒踪。flex-start | flex-end | center | baseline | stretch都與align-items屬性完全一致。
