容器元素设置的样式
display:flex：规定元素是flex布局，里面的元素自然会像浮动一样横向排列；
横向排列或纵向排列，正序还是倒序
flex-direction：row | row-reverse | column | column-reverse;规定子元素是横向排列还是纵向排列；
子元素超出父元素是否换行
flex-wrap: nowrap | wrap | wrap-reserve；规定子元素的宽度超过父元素时，换行还是不换行，或则是反向换行；
排列方向和是否换行的合并写法
flex-flow：row wrap;也可以同时规定子元素的排列方向和是否换行;
子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式(同样是在父元素上设置)：
规定子元素在指定排列方向上的分布方式：分别代表 左浮动效果、右浮动效果、居中、贴边间距相等、不贴边间距相等；
x轴方向分布方式
justify-content: flex-start | flex-end | center | space-between | space-around；
额外说一下justify-content:space-around；代表第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半，中间的元素等分间距。也就是每个子元素两边的margin是一样的；
y轴方向的分布方式
子元素的尺寸确定之后，用此属性来设置在父元素上flex-direction（定义方向）上的（垂直）方向的分布方式：
align-items:flex-start | flex-end | center | baseline | stretch；
以上分别代表在定义排列方向的垂直方向：顶部对齐、底部对齐、居中对齐、子元素内文字底部对齐、子元素高度拉伸和父元素一样高；
设置多行子元素在行方向上的对齐方式：
align-content : flex-start | flex-end | center | space-between | space-around | stretch；
分别代表：多行整体靠上排列、 多行整体靠下排列、多行整体居中排列、第一行子元素靠上顶格，最后一行子元素靠下顶格，中间行子元素等分垂直的间距、同理、同理；
子元素设置的样式
条目属性：（也是在子元素上设置）
order：order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。也可以设置成负数（整数）
flex-grow:number；表示当父元素有多余的空间时，这些空间在不同子元素之间的分配比例，该属性值默认为0，即使存在剩余空间，也不放大。
比如如果所有项目的flex-grow属性都为1，则如果有剩余空间的话它们将等分剩余空间。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据 的剩余空间将比其他项多一倍。下面是把第一和第三个元素设为1，第二个设为2：
flex-shrink:number；当父元素的空间不足时，各个子元素的尺寸缩小的比例，默认为1；即默认是如果父元素装不下子元素，如果不换行的话那么子元素都按照一样的比例缩 小。该属性取负值无效。
比如如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。下面是默认情况下，我把三个子元素的宽都设为100，而父元素只有200 的宽，此时三个子元素都按照一样的比例缩小：
flex-basis：设置子元素理想的宽度；flex-basis属性的默认值为auto，即子元素的本来大小。
该属性跟长度width差不多意义，可以设为一个长度值，定义了子元素初始占据的宽度。该属性是设置子元素在被放进一个flex容器之前的大小，也就是子元素理想或 假设的大小，但是flex-basis并不能保证其实际呈现的大小！
但当父元素装不下子元素时，子元素会按照flex-shrink来进行相应比例的缩小，如果没有设置flex-shrink默认情况下每个子元素的压缩率都是一样的。
当父元素有空余空间时，设置了flex-basis的子元素并不会自动扩大，而是保持flex-basis的属性值设置的大小。
flex：flex-grow、flex-shrink和flex-basis的组合
（flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。）
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self:auto | flex-start | flex-end |center|baseline|stretch；覆写父元素指定的align-items对齐方式。
看各个样式的效果图，请看这个连接：链接