flex布局可以简便、完整、响应式地实现各种页面布局。目前也得到所有浏览器的支持，可以放心大胆地使用这项功能。以下做简单使用介绍。
任意一个容器都可以使用flex布局。display：flex；
概念
使用flex弹性布局之前，需要搞明白几个名词。就是名词，记住就行 （假设容器是个长方形的）
- 主轴（
main axis） 长 - 交叉轴（
cross axis） 宽 - 主轴开始的位置（
main start） - 主轴结束的位置（
main end） - 交叉轴开始的位置（
cross start） - 交叉轴结束的位置（
cross end）
容器和项目各有6个属性，下面依次介绍
容器属性
容器的属性：就是指在该盒子下，控制内部元素排列方式的属性。
flex-direction
flex-direction属性是决定主轴的方向。默认情况下，主轴方向是水平从左到右的。
flex-direction有四个值：
row：水平排列，元素从窗口左到右row-reverse，水平排列，元素从窗口右到左column，垂直排列，元素顺序从上到下column-reverse，垂直排列，元素逆序从上到下
<div class="demo">
<div>第一个块级元素</div>
<div>第二个块级元素</div>
</div>
<style>
.demo{
display: flex;
flex-direction: row-reserve;
}
</style>
<div class="demo">
<div>第一个块级元素</div>
<div>第二个块级元素</div>
</div>
<style>
.demo{
display: flex;
flex-direction: column-reverse;
}
</style>
自己可以手动尝试
row，column，加深印象。
flex-wrap
默认情况下，容器内元素都是水平排放不会自动换行，如果超出窗口之外，会加横向滑动条。 flex-wrap属性决定如果一行放不下的情况下，如何换行。
flex-wrap有三个值：
nowrap默认情况，不换行wrap换行，往下换行（正常人类书写方向）wrap-reserve换行，往上换行
<div class="demo">
<div v-for="item in [1,2,3,4,5,6,7]" :key="item">{{item}}</div>
</div>
<style>
.demo{
display: flex;
flex-wrap: wrap;
}
.content {
margin: 50px;
width:150px;
background-color: pink
}
</style>
<div class="demo">
<div v-for="item in [1,2,3,4,5,6,7]" :key="item">{{item}}</div>
</div>
<style>
.demo{
display: flex;
flex-wrap: wrap-reverse;
}
.content {
margin: 50px;
width:150px;
background-color: pink
}
</style>
flex-flow
flex-flow是flex-direction和flex-wrap的简写形式。 书写方式为，flex-flow:row wrap;(水平排列，元素从窗口左到右; 往下换行)
justify-content
justify-content属性是指定项目在主轴上的排列方式 它有六个值
flex-start：（也是默认情况），左对齐。flex-end：右对齐。center：居中对齐space-around：项目两边的间隔相等，平分占据水平方向的空间space-between：两端和窗口两边重叠，项目之间间隔相等，平分占据水平方向的空间space-evenly：每个项目间隔和容器之间的间隔相等
截取space-around和space-evenly效果对比：
space-around：
space-evenly：
align-items
align-items定义项目在交叉轴上的排列方式 它有5个值：
flex-start：交叉轴的起点对齐，默认交叉轴起点在盒子顶部。flex-end： 交叉轴的终点对齐，默认交叉轴终点在盒子底部。center：交叉轴的中点对齐baseline：依据第一个项目中的文字基线对齐stretch： 如果项目没有设置高度或者高度设置为auto，则会占据容器的整个高度
align-content
align-content定义了多根轴线的对齐方式，前提是需要设置flex-wrap:wrap,否则不会生效。（如果项目都不换行了，哪还有多轴线的事儿呢） 它有6个值：
flex-start：以交叉轴的起点对齐。依次向下换行flex-end：以交叉轴的终点对齐。依次向下换行center：以交叉轴的中点对齐。依次向下换行space-around：每根轴线两侧的间隔都相等space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。stretch： 轴线占满整个交叉轴 没看懂space-around和stretch的不同点
项目属性
项目属性：属性都设置在项目（元素）上
order
order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0.
<div class="flex-box">
<div style="order:1">1</div>
<div style="order:0">0</div>
<div style="order:2">2</div>
<div style="order:4">4</div>
<div style="order:3">3</div>
<div style="order:-1">-1</div>
</div>
<style>
.flex-box{
display: flex;
}
.flex-box div{
background-color: pink;
margin:10px
}
</style>
flex-grow
flex-grow：定义元素的放大比例，默认情况为0（即使存在剩余空间，也不放大）。如果所有元素flex-grow的属性值都为1，则所有元素平分剩余空间，如果有元素的flex-grow属性值为3，则该元素占据剩余空间比其他为1的元素多两倍。
<div class="flex-box">
<div style="flex-grow:1">1</div>
<div style="flex-grow:1">0</div>
<div style="flex-grow:3">2</div>
<div style="flex-grow:1">4</div>
</div>
<style>
.flex-box{
display: flex;
}
.flex-box div{
background-color: pink;
margin:10px
}
</style>
flex-shrink
flex-shrink：定义元素的缩小比例，默认为1（如果空间不足，该元素则缩小）。如果所有元素的flex-shrink的属性值都为1，空间不够时，都等比例缩小。如果有一个元素为0，则该元素不缩小。
与flex-grow类似，可手动尝试，这里不再展示。
flex-basis
flex-basis：定义元素在分配多余空间之间，元素占据主轴的空间（如果主轴水平方向，设置的元素的宽度。如果主轴垂直方向，设置元素的高度）
<div class="flex-box">
<div style="flex-basis:40px">1</div>
<div style="flex-basis:30px">0</div>
<div style="flex-basis:50px">2</div>
<div style="flex-basis:60px">3</div>
</div>
<style>
.flex-box{
display: flex;
width:500px
}
.flex-box div{
width：40px;
background-color: pink;
margin:10px
}
</style>
flex
flex：是flex-grow flex-shrink flex-basis的简写，默认值为 0 1 auto
align-self
：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items属性。默认为auto：表示继承父元素的align-items属性。
- auto
- flex-start
- flex-end
- center
- baseline
- stretch
