父元素

设置 display:flex，使父子元素变成了伸缩盒子。

• flex-direction：控制子元素排列方向。     默认为水平排列：row，竖向排列：column

• justify-content: 控制子元素在主轴上（X轴）对齐方向 

 flex-start 左 | flex-end 右| center 居中| space-between 两端| space-around 每个子元素两侧的间隔相等，这个会导致左右两端间距会小，因为中间是两个间距相加了;

• align-items: 控制子元素在交叉轴（Y轴）上的对齐方向

• flex-start：交叉轴的起点对齐。

• flex-end：交叉轴的终点对齐。

• center：交叉轴的中点对齐。

• baseline: 项目的第一行文字的基线对齐。

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• flex-wrap: 控制子元素换行  nowrap 不换行 | wrap 换行| wrap-reverse 换行，第一行在下方;
  
  

来源：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html