你不能只会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点需要强调下，很多新手都很容易忽略：

1. 自动拉伸的元素只针对width为auto的元素，如果宽度设置了指定的with，stretch将会失效。

2. 自动拉伸的元素会受到max-height/max-width的约束，利用这个特性我们可以更自由的组合元素，做到更个性化的拉伸效果。

四、space-between

space-between大家更是比较熟悉了，他的含义是：

第一个元素与头部对齐，最后一个元素与尾部对齐。然后相邻元素间距离相同。

这个其实和space-around布局、space-evenly布局、center一样都是用来做居中对称布局，只是这个非常容易理解，单独拿出来提一下带过即可，相信很多小伙伴看到这里已经有了比较全面的认识啦！

总结

我们本次结合图文把flex的所有布局方式都详细讲解完毕(center布局太常见了除外)。相信各位看官应该都能看懂，如果各位有疑问或者文章有误的地方，欢迎各位评论交流哦~

如果这篇文章能给您带来一点点的帮助的话，麻烦移动下鼠标点个️赞️吧！您的点赞会给笔者带来更新的持续动力！

源码附录

让我们再通过源码直观看下所有的flex布局的不同布局方式：

ps:由于掘金展示代码区域较窄，可以通过关闭左侧源码方式+通过检查元素拉伸代码展示区方式获得和上图动画中一样的直观体验。或者直接拷贝代码本地运行哦~

可以看到，在比较窄的width宽度范围内，各种布局方式看不出很明显的区别，但是再长度较长的容器中，对比就会越来越明显，这同样也意味着，在一些大屏或者超宽屏的页面上，更要学会所有flex布局，才能在用到的时候快人一步！

程序员面试题库分享

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库

2、前端技术导航大全      推荐：★★★★★

地址：前端技术导航大全

3、开发者颜色值转换工具   推荐：★★★★★

地址 ：开发者颜色值转换工具

4、前端边框阴影在线工具     推荐：★★★★★

地址：前端边框阴影在线工具