有6个属性设置在项目上
1.order:定义项目的排列顺序。数值越小，排列越靠前，默认为0。
例
<style>
.div{
width: 100%;
background-color: green;
height: 400px;
display: flex;
justify-content: space-between;
align-content: center;
}
.div1{
background-color: red;
height: 100px;
width: 100px;
font-size: 22px;
order: 2;
}
.div2{
background-color: darkcyan;
height: 150px;
width: 200px;
}
.div3{
background-color: orange;
width: 300px;
height: 200px;
font-size: 40px;
order: 1;
}
</style>
这样写的话，第一个div在最后，第二个div在第一个，第三个div在中间，结果如下
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
例
.div1{
background-color: red;
height: 100px;
width: 100px;
font-size: 22px;
flex-grow: 1;
}
.div2{
background-color: darkcyan;
height: 150px;
width: 200px;
flex-grow: 1;
}
.div3{
background-color: orange;
width: 300px;
height: 200px;
font-size: 40px;
}
给div1和div2加上flex-grow：1；结果如下
3.flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
例
.div1{
background-color: red;
height: 100px;
width: 100px;
font-size: 22px;
flex-shrink: 2;
}
.div2{
background-color: darkcyan;
height: 150px;
width: 200px;
flex-shrink: 2;
}
.div3{
background-color: orange;
width: 300px;
height: 200px;
font-size: 40px;
}
给div1和div2加上flex-shrink：2；结果如下
4.flex-basis:定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
5.flex:flex-grow, flex-shrink 和 flex-basis的简写
例
.div1{
background-color: red;
height: 100px;
width: 100px;
font-size: 22px;
flex:0 1 auto;
}