概述：
1、flex，即 flexible box，中文为弹性盒子
2、需要有flex container（弹性容器） 和 flex item（子元素），对弹性容器中的子元素进行弹性布局
1、元素正常情况下排列
.container {
width: 400px;
height:400px;
padding: 10px;
border: 2px solid #dbdbdb;
}
.item {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
}
.color1 {
background-color: #b4b3ff;
}
.color2 {
background-color: pink;
}
.color3 {
background-color: #803f64;
}
<div class="container">
<div class="item color1"></div>
<div class="item color2"></div>
<div class="item color3"></div>
</div>
图1
2、flex布局排列
会消除块状属性，所有与块状相关的属性将失效，比如块状元素会独占一行，如图2，设置flex后会在一行排列
.container {
display: flex;
}
图2
3、flex布局主轴方向
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
该属性决定主轴方向，有四种情况
1、row：横向正序排列，默认情况，主轴方向从左往右(→)
图3
2、row-reverse：横向倒序排列，主轴方向从右往左(←)
图4
3、column：纵向正序排列， 主轴方向从上到下(↓)
图5
4、column-reverse：为纵向倒序排列，主轴方向从下到上(↑)
图7
4、flex布局主轴方向对齐方式
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
该属性决定主轴对齐方向，有五种情况，以下按照主轴方向从左往右示例
1、flex-start：默认情况，沿主轴开始方向对齐
图8
2、flex-end：沿主轴相反方向对齐
图9
3、center：在主轴方向居中显示
图10
4、space-between：沿主轴方向两端对齐
图11
5、space-around：从主轴开始，项目两边间隔相同
图11
5、flex布局交叉轴对齐效果
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
交叉轴与主轴垂直，比如主轴在水平方向，则交叉轴在垂直方向
1、flex-start：沿交叉轴开始方向对齐
图12
2、flex-end：沿交叉轴结束方向对齐
图13
4、center：沿交叉轴方向居中对齐
图14
5、baseline：文字基线对齐
图15
6、stretch：如果元素不设置高度(交叉轴为纵轴)或者宽度(交叉轴为横轴)时，自动填充整个容器
图16
6、flex布局主轴换行
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
1、nowrap：默认不换行
图17
2、wrap：换行
图18
3、wrap-reverse，逆向换行，第一行会跑到第二行下面
图19
