flex属性
flex属性是flex-grow、flex-shrink和flex-basis的缩写，其均是作用在项目上，默认值为0 1 auto。后两个属性可选；
注意： 该属性有两个默认的值：auto（1 1 auto）和 none（0 0 auto）。建议优先使用auto默认值，浏览器会推算相关值。
- flex-grow: 定义项目的放大比例，默认为0；也就是当在主轴方向上（假设项目的排列是沿主轴方向排列）存在剩余空间时，分配到每个项目上的剩余空间
场景：如果所有项目的flex-grow都为1，那么他们将等分剩余空间；如果其中一个项目的flex-grow为2，其余的项目为1，那么它占用剩余空间是其他项目的2倍； - flex-shrink: 定义项目的收缩比例，默认为1，即如果空间不足，该项目将缩小；如果为0，则不缩小；
场景：如果所有项目的flex-shrink均为1，当空间不足时，将等比例缩小；如果其中有一个项目的flex-shrink为0，其余均为1，空间不足时，前者不缩小 - flex-basis：表示在分配主轴多余空间时，项目占据的主轴空间，浏览器根据这个特性，计算主轴是否存在多余空间。默认值为auto，即项目的本来大小；它可以设为跟width或height属性一样的值，即项目的固定大小
左右在flex容器上的属性
- display: flex
表示该容器使用flex布局 - flex-direction属性
表示创建主轴的方向（即项目的排列方向）
div{
flex-direction: row | row-reverse | column | column-reverse;
}
排列方向如下所示：
image.png
- flex-wrap属性
默认情况下，项目都排在一条线（轴线）上，该项目定义，如果一行排不下，项目如何进行换行
div{
flex-wrap: nowrap(默认) | wrap | wrap-reverse;
}
注意： wrap换行是第一行在上方，wrap-reverse是第一行在下方（相反的方向）
- flex-flow属性
flex-flow属性是flex-direction和flew-wrap的简写形式，
默认是row nowrap；
div{
flex-flow: <flex-direction> | <flex-wrap>
- justify-content属性
定义项目在主轴上的对齐方式，假设flex-direction:row，也就是主轴方向是行，那个该属性定义的就是项目在一行上的对齐方式；
div{
justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;
}
主要需要注意的属性有：space-between | space-around
space-between: 两端对齐，项目之间的间隔相等
space-around: 每个项目两侧的距离相等。所以项目之间的间隔是两侧项目与边框之间间隔的一倍，可以理解为给项目添加了margin-left和margin-right属性，这样每个项目之间的间距就增大了
align-items属性
定义项目在交叉轴（假设flex-direction:row横向排列，交叉轴就是竖轴）上的对齐方式
div{
align-items: flex-start | flex-end | center | stretch | baseline;
