给一个元素添加该属性，则这个元素就会变成弹性盒子模式
如果给元素添加了flex，那么flex内部的元素会自动横向排列
容器
flex-direction
column 将主轴切换为纵轴 flex-start在上 flex-end在下
column-reverse 将主轴切换为纵轴 flex-start在下 flex-end在上
row 默认值 从左到右横向排列
row-reverse flex-start在有 flex-end在左
不管是主副轴，排列都是从flex-start 到 flex-end排列的
flex-wrap
默认弹性盒子的项目是不会换行的，如果想要换行则添加flex-wrap
no-wrap 不换行 默认值
wrap 正常换行
从副轴的start开始，往下换行
wrap-reverse 反向换行
从福州的end开始，往上换行
flex-flow
是flex-direction 和 flex-wrap的复合属性
就是上面两个属性的属性值，中间加空格
justify-content 控制了所有项目在主轴上的排列方式
flex-start 默认值 容器中项目全部在左边排列
flex-end 容器中项目紧贴右边
center 居中
space-between 左右两边贴边，中间间距等分，类似text-align:justify
space-around 项目两端距离相等
设置了项目左右两端的距离相等
space-evenly
将剩余空间等分，将项目间距设置成相同的距离
align-items
stretch 默认值，元素在主轴上占百分百的空间
flex-start
项目在副轴上的排列位置 设置为flex-start
flex-end
center
align-content
仅仅适用于换行时，表示多行在副轴上的排列方式
stretch 默认值，如果没有高度，则将总高除以行数平分给每一行
flex-start
flex-end
center
space-between
space-around
space-evenly
项目
align-self
可以单独给某个项目设置其在副轴上的位置
flex-grow
如果有剩余空间，是否自动放大
默认值为0
最后所占宽度 = 默认宽度 + （剩余空间 / 总grow） 对应元素grow
flex-shrink
如果空间不够，是否自动缩小
默认值为1
最后所占空间 = 默认宽度 - （压缩空间 / 总shrink） 对应的元素shrink
flex-basis
表示元素在主轴上的所占的空间大小
主轴为横轴，表示宽 主轴为纵轴，表示高
默认值为 auto 跟宽或高
flex
三个的复合属性
flex的默认值为 0 1 auto
可以只写一个值或两个值
flex: 1
flex-grow: 1
flex-shrink: 1 默认值，不是因为上面设置为1才是1
flex-basis: auto
flex: 1 0;
flex: 0
order
进行项目排序
order默认为0 当所有元素的order都相同时，则按照HTML结构排列
设置order值越小则越靠前，越大越靠后
