你不能只会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的项目生效。