flex总结一下

display:flex：规定元素是flex布局，里面的元素自然会像浮动一样横向排列；

flex-direction：row | row-reverse | column | column-reverse;规定子元素是横向排列还是纵向排列；

flex-wrap: nowrap | wrap | wrap-reserve；规定子元素的宽度超过父元素时，换行还是不换行，或则是反向换行；

flex-flow：row wrap;也可以同时规定子元素的排列方向和是否换行;

子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式(同样是在父元素上设置)：

规定子元素在指定排列方向上的分布方式：分别代表 左浮动效果、右浮动效果、居中、贴边间距相等、不贴边间距相等；

justify-content: flex-start | flex-end | center | space-between | space-around；

额外说一下justify-content:space-around；代表第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半，中间的元素等分间距。也就是每个子元素两边的margin是一样的；

以下是在子元素上设置的：

子元素的尺寸确定之后，用此属性来设置在父元素上flex-direction（定义方向）上的（垂直）方向的分布方式：

align-items:flex-start | flex-end | center | baseline | stretch；

以上分别代表在定义排列方向的垂直方向：顶部对齐、底部对齐、居中对齐、子元素内文字底部对齐、子元素高度拉伸和父元素一样高；

设置多行子元素在行方向上的对齐方式：

align-content : flex-start | flex-end | center | space-between  | space-around | stretch；

分别代表：多行整体靠上排列、 多行整体靠下排列、多行整体居中排列、第一行子元素靠上顶格，最后一行子元素靠下顶格，中间行子元素等分垂直的间距、同理、同理；

条目属性：（也是在子元素上设置）

flex-grow:number；表示当父元素又多余的空间时，这些空间在不同子元素质检的分配比例

flex-shrink:number；当父元素的空间不足时，各个子元素的尺寸缩小的比例

align-self:auto | flex-start | flex-end |center|baseline|stretch；覆写父元素指定的对齐方式。

看各个样式的效果图，请看这个连接：链接