这张图非常经典，直观的看出flex布局几种属性的区别和效果
弹性盒子是一种用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间，适用于任何元素上，如果一个元素使用了flex弹性布局（以下都会简称为：flex布局），则会在内部形成BFC，flex布局已经得到了所有浏览器的支持，这意味着，现在就能放心，安全的使用这项技术。
下面介绍flex的属性：
flex-direction
flex-direction决定了主轴的方向，有四个取值- 分别为
row（默认值水平）、row-reverse（水平反向）、column（垂直）、column-reverse（垂直反向） - 注意：
flex-direction并不是直接改变flex items的排列顺序，他只是通过改变了主轴方向间接的改变了顺序
flex-wrap
flex-wrap 能够决定flex items是在单行还是多行显示，子元素的长度超过父元素的长度，就换行处理
- 有三个属性值：nowrap（默认）单行，wrap：多行，wrap-reverse：多行反向
justify-content
justify-content决定了flex items在主轴上的对齐方式，总共有6个属性值：
- flex-start（默认值）：在主轴方向上与main start对齐
- flex-end：在主轴方向上与main end对齐
- center：在主轴方向上居中对齐
- space-between
特点：
- 与main start、main end两端对齐
- flex items之间的距离相等
- space-evenly
特点：
- flex items之间的距离相等
- flex items与main start、main end之间的距离等于flex items的距离
- space-around
特点：
- flex items之间的距离相等
- flex items与main start、main end之间的距离等于flex items的距离的一半
align-items
align-items决定了单行flex items在cross axis（交叉轴）上的对齐方式
该属性具有如下几个属性值：
stretch（默认值）：当flex items在交叉轴方向上的size（指width或者height，由交叉轴方向确定）为auto时，会自动拉伸至填充；但是如果flex items的size并不是auto，那么产生的效果就和设置为flex-start一样
注意：触发条件为：父元素设置align-items的属性值为stretch，而子元素在交叉轴方向上的size设置为auto
- flex-start：与cross start对齐
- flex-end：与cross end对齐
- center：居中对齐
- baseline：与基准线对齐
至于baseline这个属性值，平时用的并不是很多，基准线可以认为是盒子里面文字的底线，基准线对齐就是让每个盒子文字的底线对齐
align-content
- 属性值:
stretch（默认值）、flex-start、flex-end、center、space-bewteen、space-around、space-evenly
flex
-
flex是flex-grow | flex-shrink | flex-basis的简写，说明flex属性值可以是一个、两个、或者是三个，剩下的为默认值
-
默认值为flex： 0 1 auto（不放大但会缩小）
-
none： 0 0 auto（既不放大也不缩小）
-
auto：1 1 auto（放大且缩小）
