弹性布局 （父盒子设置display:flex）

1.主轴方向的使用: flex-direction;

默认从左到右：flex-direction:row;
从又到左对齐 ：flex-direction：row-reverse;
从上到下对齐 ：flex-direction：column;
从下到上对齐 ：flex-direction;

2.主轴的对齐方式使用: justify-content修改;

默认左对齐： justify-content：flax-start;
右对齐 : justify-content:flex-end;
居中对齐： justify-content：center;
两端对齐： justify-content：space-between;
间距相等，中间的距离是边缘的两倍： justify-content：space-around ;

3.次轴的对齐方式使用: align-item 修改;

默认高度平铺100%，子元素不能设置高度：align-item:stretch;
上对齐：align-item:flex-start;
下对齐：align-item：flex-end;
居中对齐:align-item:center;

4.主轴换行方式：（默认数不允许换行的，如果需要换行要加 flex-wrap:wrap 即可）;

5，多行对齐的方式用：align-center;

默认平铺：align-content:strecth;
上对齐：align-content:flex-start;
下对齐：align-content:flex-end;
居中对齐：align-content:center;
两端对齐：align-content:space-between;
间距相同：align-content:space-around;