flex布局常见用法小结

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，让其换行显示，子元素的宽高又恢复正常，看下图