1，display：flex
这个在父容器中声明；
2，flex-direction:row / column
默认为横向，也在父容器中设置，定义flex布局的主轴方向；一条轴为主轴，那么另一条轴自然而然就是副轴；
3，flex：1
在子元素中设置，表示所有的子元素不管内容如何，其宽度和高度都完全一样，且加起来刚好充满父容器；
4，align-items:center | flex-start | flex-end | space-between | space-around
这个表示元素在副轴方向上的排列；
5，justify-content:center | flex-start | flex-end | space-between | space-around
表示元素在主轴方向上的排列，在父容器中设置，center代表所有元素挤到最中间显示，如下：
而space-between则意味着空格将主要处于横向页面的中间，换言之，左右两边界没有空隙，效果如下：
space-around则代表所有的子元素左右间隙相等，左右边界均有空隙，效果如下：
6.flex-wrap:no-wrap(默认) | wrap
这是关于是否换行的问题，如已经设置子元素的大小，但子元素的数量加起来长度超过屏幕一行，那么因为默认是不换行的，子元素原来被设置的宽度将被压缩，所有子元素硬挤在一行显示，如下。
更改属性flex-wrap:wrap，让其换行显示，子元素的宽高又恢复正常，看下图
