flexbox
flexbox布局是伸缩容器（container）和伸缩项目组成（item）布局的主题思想是元素可以改变大小以适应可用空间
伸缩容器的属性
display
flex 块级伸缩容器
inline-flex 行内伸缩容器
flex-direction
指定主轴方向
row 水平 从左到右
column 垂直 从上到下
row-reverse 水平从右到左
column 垂直从下到上
flex-warp
伸缩容器主轴方向空间不足的时候 是否换行 该如何换行
nowarp 默认值 不会换行 自动缩放
wrap 自动换行 主轴方向
warp-reverse 自动换行 主轴反向
flex-flow
2和3的综合
flex-flow : row nowrap
justify-content
用来定义伸缩项目在主轴线的伸缩方式
flex-start 主轴线起始方向对齐 默认值
flex-end 主轴线结束位置对齐
center 主轴方向居中
space-between 伸缩项目平均分布在主轴线上
space-around 伸缩项目平均分布在主轴线上，两边保留一半空间
align-items
用来定义伸缩项目在交叉轴上的对齐方式
flex-start 交叉轴起始方向对齐 默认值
flex-end 交叉轴结束位置对齐
center 交叉轴向居中
baseline 伸缩项目根据基准线对齐（楼梯）
strech 伸缩项目拉伸填充
align-content
伸缩项目出现换行后在交叉轴上的对齐方式
flex-start 交叉轴起始方向
flex-end 交叉轴结束方向
center 交叉轴中兴
space-between 平分交叉轴
space-around 平分交叉轴 交叉轴两边留有一半空间
strech 默认值
伸缩项目的属性
order
定义项目排列顺序 数值越小 排列越靠前 默认值是0 order：0
flex-grow
主轴方向有剩余空间时
定义伸缩项目的放大比例 默认值0 表示存在剩余空间也不放大
flex-shrink
主轴方向空间不足时
定义伸缩项目的收缩能力 默认值为1 flex-shrink:1
flex-basis
用来设置伸缩项目的基准值 剩余空间按比例进行伸缩
flex-basis：length
flex-basis： auto 默认值
flex
flex-grow flex-shrink flex-basis三个属性的缩写，
其与语法 flex:none
flex-grow flex-shrik flex-basis 其中第二个和第三个参数为可选值
默认值 0 1 auto
algin-self
用来设置单独伸缩项目在交叉轴的对齐方式，会覆盖默认的对齐方式
auto
flex-start 交叉轴起始方向
flex-end 交叉轴结束方向
center 交叉轴中心
baseline 交叉轴上的基准线对齐
stretch 交叉轴方向占满伸缩容器 （交叉轴为垂直方向的话，只有在不设置高度情况下 起作用）
