flex布局

1，父元素的属性：display: flex; 声明元素用flex渲染，flex-direction:row ,row-reverse,colunm，column-reverse ，这是设置主轴的方向，也确定了fex-start flex-end 的方向。交叉轴的方向是主轴方向顺时针旋转90。

justify-content: 确定项目的主轴排列方向。其中space-between是项目与两边相切。

align-items 确定项目交叉轴的排序方向。值和justify-content一样，当只有一条轴的时候，该属性不起作用。

flex-wrap 确定项目是否换行。

2，项目属性;

flex:0 0 20%;
第一个是flex-grow 默认是0 ，在存在剩余空间下，不会“长大”。当所有都是1或者同一值的时候，等分，当有个2的时候，“长大”是1的两倍。
第二个flex-shrink 默认是1 ，即是缩放等同的比列。当为0的时候，不缩小。
以上数值可以理解是倍数。
第三个是flex-basis 默认auto，就是原来大小，该值可以是px，%，这是显示项目的大小
传送门