让我们先看下直观的布局方式动画截图：
一、space-around布局/space-evenly布局
space-around布局和space-evenly布局其实本质上差别不大，正因为如此，也导致了很多新手很难搞懂他们的区别，其实我们只要仔细观察下文章开头的动画，以及仔细对比下面的两张图，心细的童鞋们其实会发现，他们的区别很简单，也非常易懂，让我们先把图贴上：
怎么样，心细的你是不是已经发现他们的区别了呢？是的，正如你看到的那样，他们的含义和解释如下：
space-around布局和space-evenly布局都是做的居中均分剩余空隙间距的布局方式，且这两种排序方式中，各个元素之间的距离都是完全一致的。
注意：上文提到的各个元素之间的距离只包含A、B、C项3个元素space-around的156px和space-evenly的中间2个113px的间距，并不包含首尾间距，如space-around的78px间距和space-evenly布局的首尾2个113px间距，即使evenly的首尾间距和各元素之间的间距是一样的。
他们唯一的区别就是：
在space-around布局方式中，第一个元素到开头的距离(78px)和最后一个元素到末尾的距离(78px)将会是各个相邻元素之间距离（156px）的一半。（156 / 2 = 78px）
在space-evenly布局方式中，第一个元素到开头的距离(113px)和最后一个元素到末尾的距离(113x)将会和各个相邻元素之间的距离(113px)保持完全相等。（都是113px）
这时候我们再把文章开头的gif动图拿过来对比下，是不是一下子就完全搞懂了呢？
二、flex-start/flex-end
flex-start/flex-end大家应该都不陌生，就是从flex主轴的方向从开头(start)到结束(end)依次排列。
flex-start/flex-end特性我们不再多说。
但是有个附加点可以留意下：其实flex除了flex-start/flex-end以外，还有start/end布局。有的开发者说应该是flex-start，有的开发者说应该是start，各执一词。其实这两个布局方式都是存在的。
flex-start是针对所有flex盒子项进行排列，而start是针对所有项进行排列，不管是不是flex盒子。这就意味着 reverse之类的（如row-reverse）排列方式将不会对设置start的项目生效，只会针对设置了flex-start的项目生效。
三、stretch
stretch也比较好理解，他的含义是：自动拉伸子元素，直到铺满父容器为止。这里有2点需要强调下，很多新手都很容易忽略：
- 自动拉伸的元素只针对width为auto的元素，如果宽度设置了指定的with，stretch将会失效。
- 自动拉伸的元素会受到max-height/max-width的约束，利用这个特性我们可以更自由的组合元素，做到更个性化的拉伸效果。
四、space-between
这个其实和space-around布局、space-evenly布局、center一样都是用来做居中对称布局，只是这个非常容易理解，单独拿出来提一下带过即可，相信很多小伙伴看到这里已经有了比较全面的认识啦！
总结
我们本次结合图文把flex的所有布局方式都详细讲解完毕(center布局太常见了除外)。相信各位看官应该都能看懂，如果各位有疑问或者文章有误的地方，欢迎各位评论交流哦~
如果这篇文章能给您带来一点点的帮助的话，麻烦移动下鼠标点个❤️赞❤️吧！您的点赞会给笔者带来更新的持续动力！
