flex布局
容器 container
使用flex布局
.cintainer{
dispaly:flex; /* or inline-flex */
}
改变items流动方向（主轴）
flex-direction: row | colum |
row: 水平方向 （默认值）
colum：垂直方向
row-reverse：水平方向，从右往左
colum-reverse：垂直方向，从下网上
控制是否换行
flex-wrap:wrap | nowrap
wrap:换行
nowrap：不换行
主轴对齐方式
justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly
flex-start:靠近开始的（默认）
flex-end：靠近结束的
center:居中对齐的
space-between:多余的空间平均分插入到item间隙中（首尾item只有一侧，间隙等宽）
space-around：多余的空间围绕在item周围（间隙不等宽）
space-evenly：多余的空间围绕在item周围（间隙等宽）
次轴对齐方式（默认次轴是纵轴）
align-items:flex-start | flex-end | center | stretch | baseline
flex-start:靠近开始的（默认）
flex-end：靠近结束的
center:垂直居中对齐的
stretch:垂直方向撑满(使用时应不设置高度)
baseline：文本基线对齐
多行内容
align-content:flex-start | flex-end | center | stretch | space-between | space-around
flex-start:靠近次轴开始
flex-end：靠近次轴开始
center：垂直居中
stretch：垂直撑满
space-between：空隙平均分放在item之间
space-around：空隙平均分放在item周围
容器内的项 items
使用order改变item顺序
order:number;
取值可以为负
使用flex-grow控制item的宽度
flex-grow:number;
将多余的空间进行平均分，所分的份数，默认值是0不参与分配
使用flex-shrink控制item的收缩
flex-shrink:number
item具有一定的宽度之后，父元素收缩之后小于原始宽度，控制当前item搜索的程度
数值越大收缩的越狠，默认值为1
flex-shrink:0; 防止收缩
注意：flex-grow和flex-shrink可以简写
flex: grow shrink width;
写了shrink就必须要写一个宽度
flex-basis控制基准宽度
flex-basis:auto
align-self控制自身的位置
align-self：flex-start | flex-end
常用
display: flex
flex-direction: row / column
flex wrap: wrap
justify-content: center / space between
align-items: center
