你不能只会flex居中布局，精制动画讲解所有flex布局方式！通俗易懂纯干货教程！
flex布局相信很多人都已经有不少了解，其优势和作用被越来越多的开发者所喜爱，网上也有很多关于关于flex的介绍和教程。但是根据笔者的面试经验发现，很多人尤其是初中级开发者对flex布局都仅仅停留下center布局、flex-start/end布局。当被问到什么是 stretch布局、space-between布局时，有一部分人就开始含糊其辞。尤其是当被问到什么是space-around布局、space-evenly布局，以及他们的区别的时候。几乎90%以上的同学都会被问住。
其实flex除center以外的布局方式同样重要，只是我们平时用到的场景不如center多。彻底学会其他布局方式，不仅仅在面试的时候可以发挥重要作用(🐶🐶甚至可以吊打某些水平差的面试官🐶🐶)，而且在平时的日常开发过程中，适当的运用合适的布局，也可以让页面更美观，体验感更好哦~
针对很多新手和中级开发者理解flex布局方式比较晦涩难懂的情况，笔者通过制作了一个精心准备的动画效果，让各种布局方式更直观、对比更强烈的展现出来，然后结合图文用非官方的通俗易懂的方式详细讲解每一种布局方案，让所有初中级开发者都能彻底搞懂每一种flex布局方式！
让我们先看下直观的布局方式动画截图：
是不是已经有一定直观的差别对比了呢，看不太懂也没关系，接下来我们将把上图的动画挨个拆解解析，确保小白也能听懂每一个flex布局原理！
如果这篇文章能给您带来一点点的帮助的话，麻烦移动下鼠标点个❤️赞❤️吧！您的点赞会给笔者带来更新的持续动力！
ps: 我们会优先重点讲解新手小白晦涩难懂的space-around布局、space-evenly布局。
一、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-between大家更是比较熟悉了，他的含义是：
第一个元素与头部对齐，最后一个元素与尾部对齐。然后相邻元素间距离相同。
这个其实和space-around布局、space-evenly布局、center一样都是用来做居中对称布局，只是这个非常容易理解，单独拿出来提一下带过即可，相信很多小伙伴看到这里已经有了比较全面的认识啦！
总结
我们本次结合图文把flex的所有布局方式都详细讲解完毕(center布局太常见了除外)。相信各位看官应该都能看懂，如果各位有疑问或者文章有误的地方，欢迎各位评论交流哦~
