弹性布局可以简洁、完整、响应式的实现各种页面布局。
Flexbox主要功能：
- 屏幕和浏览器窗口大小变化也可以灵活调整布局
- 指定伸缩元素沿着主轴或者侧轴，按照一定比例分配额外的空间，调整伸缩元素的大小
- 指定伸缩元素沿着主轴或者侧轴，把伸缩元素额外空间分配到伸缩元素之前、之后和之间
- 控制元素在页面上的布局方向
- 指定如何将垂直于元素布局轴的额外空间分配到该元素的周边
- 按照不同文档对象模型（DOM），指定排序方式对屏幕上元素重新排序【浏览器渲染中不按照文档流先后顺序重排伸缩元素】
主轴和侧轴
用户沿着一个伸缩容器的主轴配置伸缩元素，主轴是水平还是垂直的取决于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：决定主轴的方向，就是子元素的排列方向。在一个容器内无非就是四种排列方向：
第一种起点在左端的水平方向，则属性值为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 | 每个子元素对两侧的间距相等，那么每两个子元素的间距是子元素与边框间距的两倍。 |
5、侧轴对齐align-items和align-self：定义子元素在侧轴上的对齐方式，有五个属性值：
| 属性值 | 描述 |
|---|---|
| flex-start | 侧轴起点对齐 |
| flex-end | 侧轴终点对齐 |
| center | 侧轴中点对齐 |
| baseline | 就是子元素的第一行文字基线对齐 |
| stretch | 默认值，若是子元素没有设置高度或者是auto的话，那子元素就沾满容器的高度 |
6、align-content（堆栈伸缩行）：定义了多轴对齐方式，若是子元素只有一根轴线的话，align-content属性就不起作用了，有6个属性值：
| 属性值 | 描述 |
|---|---|
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐 |
| center | 与交叉轴的中点对齐 |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布 |
| space-around | 每根轴线两侧的间距相等。 |
| 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：定义了子元素的排列顺序，数值越小，就越是靠前
flex-grow：定义子元素放大的比例，默认值是0
flex-shrink：定义了子元素的缩小比例，默认值是1，就是剩余空间不足，该子元素就会缩小，若有一个子元素 flex-shrink属性设置为0，其他都是1的话，那么在剩余空间不足的时候，该子元素不变，其他子元素等比例缩小
flex-basis：定义了子元素在分配剩余空间的时候，该子元素占据主轴的空间，默认值auto，就是该子元素本来的空间大小，也可以设置成具体的数值（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属性完全一致。
