前端-弹性盒子（display：flex）

在父级元素使用display:flex，那么这个元素就是弹性盒子，弹性盒子默认的排列方式为水平

元素属性

flex-direction属性：设置主轴的方向，子元素的排列方向
flex-direction: column; 设置flex垂直方向布局
flex-direction: row； 设置flex水平方向布局，也是默认的排列方式
flex-direction: column-reverse; 设置flex垂直方向布局（反转）
flex-direction: row-reverse; 设置flex水平方向布局（反转）

flex-wrap: wrap; 溢出折行
flex-flow: row wrap; 简写，等同于“flex-direction:row; flex-wrap:wrap;“

justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,
justify-content: flex-end; 将整组对齐于侧轴的结束位置
justify-content: flex-start; 将整组对齐于侧轴的起始位置
justify-content: center; 将整组对齐于侧轴的中间位置
justify-content: space-around; 将剩余的空间平局分配成几行，给到每行的两边
justify-content: space-between; 再侧轴上面两端对齐，将剩余的空间进行平均分配 分配给每行之间的间隙
justify-content: space-evenly; 将剩余的空间全部进行分配，交给每行的间隙 包括两边
justify-content: stretch; 默认的值

align-items:交叉轴排列方式
align-items: flex-start; 起始位（默认），侧轴顶端对齐
align-items: flex-end; 交叉轴结束位置对齐
align-items: center; 子元素在侧轴中间对齐

flex-grow: 1;剩余空间分配方式（1.属性值为数值，没有单位，默认值为0，表示不放大。2.可以为小数。3负值对该属性无效）

flex-shrink: 0;空余空间缩小（默认值为1，表示等前空间不足，等比例缩小；属性值0，表示空间不足时，不缩小）

order：元素的排序方式，数值越小越优先（必须为整数，不能为小数，可以为负数）

align-self: flex-end;针对于单个子项在侧轴上的对齐方式

flex-grow: 1;
flex-shrink:1;
flex-basis:50px;
简写的三种形式：
flex: 1 1 50px;
flex:1 1 auto
flex: 1;