动画：Flex布局 | 别再用传统方式进行网页布局了（上）

写在前边

网页布局，是前端入门的时候必学、必须熟练的一门技术，学到什么程度算是入门了呢？随便给你一个网站，你就可能快速的分析出网页的结构，而后搭建出模型，这是前端网页布局入门的最基本要求。

做为一个前端初学者，在学习的时候可能会用到一些盒模型传统的布局方式（display + position + float），不少小伙伴用着用着就以为这种传统布局写一些样式比较麻烦、不方便，好比垂直居中的传统实现方式如。

第一种实现方式：

本来外容器没有设置高度的时候会紧贴内元素，可是设置容器内的上下内边距相同的数值时，此时就实现了垂直居中。

第二种实现方式：

使用 Vertical-align 属性实现垂直居中。

可是这个属性每每初学者容易弄混，不知道什么时候才使用，有时元素设置这个属性并生效，这是怎么回事呢？也是初学者每每最头疼的一个问题，这个属性涉及到的内容不是一篇两篇文章写完的，这篇咱们很少涉及到。

第三种实现方式：

使用 line-height 设置父容器行高的方式进行垂直居中，可是只适用单行文本。

其实垂直居中网页布局中传统实现方式不少种，可是这么多种不一样状况下进行选择太麻烦了，咱们有没有规定一个方式就能不管是行内元素仍是块元素就能实现垂直居中呢？

咱们尝试今天要分享的 Flex 试一下垂直居中实现以下：

只需在外容器的 CSS 中设置这两个属性就能够轻松实现垂直居中。

完整代码实现以下：

是否是第二种很是的方便？其实就是一句垂直居中代码，align-items: center;

那么今天小鹿就来分享一种新布局方式，可能对于刚学习前端的小伙伴来讲是种新的，可是做为一些进阶者，这种布局常常在项目中被灵活使用，获得了不少开发者的喜好，用着用着就爱上了这种布局的方式 —— Flex布局。

看完这篇文章，小鹿也会经过生动有趣的动画，让你爱上 Flex 布局。

思惟导图

一、什么是 Flex 布局？

Flex 布局又为弹性布局，所谓弹性，就很大的提供了页面布局的灵活性。

咱们能够把一个容器（div、span等），设置它的 CSS 的 display 属性为 flex 以后，咱们就可使用 Flex 的布局方式了。

PS：一旦容器设置display: flex布局以后，咱们使用的传统布局中的float、vertical-align、clear等属性就彻底失效了。可是咱们能够经过 Flex 设置的属性去进行布局。

二、认识 Flex 布局

由于咱们再用传统布局的时候，对齐元素进行垂直居中，代码特别的麻烦，为了更好的解决这个问题，Flex 布局就规定设置横、纵两个方向，咱们不管在水平排列仍是垂直排列的时候，这样写起来更方便了。

并且 Flex 布局设置了三个位置，左边、中间、右边，并且都有对应的属性，就能够很轻松的设置元素的位置了。

光说不练假把式，咱们就开始动手写代码实践一下，跟着小鹿一块儿打开编译器。

三、容器的基本属性

3.1 flex-direction

这个属性主要用来调节布局元素的方向的，好比你想纵向排列。以下：

flex-direction: column

flex-direction: row

经常使用的就是上边这两个，其余两个相反方向的排列方式：

flex-direction: column-reverse;

flex-direction: row-reverse;

3.2 flex-wrap

这个做为换行属性，若是当元素一行摆放不开了，咱们须要选择如何换行？不换行仍是换行，仍是换行到第一行的上方呢？

(1)nowrap不换行

(2)wrap换行

(3)wrap-reverse换到第一行

咱们经过上边的属性很容易实现的。

3.3 justify-content

以前咱们传统布局的水平居中有这几种方式：

可是在 Flex 布局几种水平位置的布局。这样用起来让页面的布局更加的灵活、多变。

(1)flex-start(默认) ：左对齐

(2)flex-end：右对齐

(3)center：居中

(4)space-between：两端对齐，项目之间的间隔都相等

(5)space-around：每一个项目两侧的间隔相等。

3.4 align-items

既然有水平居中，那么就有垂直居中，垂直居中上边咱们也说过，传统的布局比较麻烦，因此咱们要见识一下 Flex 布局的强大之处。

经过这个align-items属性值，很轻松的实现垂直居中。

(1)flex-start：交叉轴的起点对齐。

(2)flex-end：交叉轴的终点对齐。

(3)center：交叉轴的中点对齐。

(4)baseline：项目的第一行文字的基线对齐。

(5)stretch：若是项目未设置高度或设为auto，将占满整个容器的高度。

四、容器内单个元素属性

咱们上边是针对外容器的一些属性设置，咱们下边的一些属性是针对于容器内元素的一些属性设置。让咱们呢一个个来看一下最经常使用的。

4.1 flex-grow

该属性主要用来定义元素的放大比例，它的默认值是 0。

若是容器内的全部元素都设置为 1，则平分剩余的空间；若是其中一个设置为 2，则按比例平分剩余的空间。

4.2 flex-shrink

该属性主要用来定义元素的缩小比例，默认值为 1。

若是全部元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。若是一个元素的flex-shrink属性为0，其余项目都为1，则空间不足时，前者不缩小。

4.3 flex-basis

浏览器会根据该属性进行对主轴计算是否有多余的空间。默认值为 auto。

4.4 flex

该属性是以上三个属性的缩写形式，默认值为0 1 auto。

还有两个其余的快捷属性，auto（1 1 auto） 和none（0 0 auto），浏览器会根据其推算相关的数值。

小结

咱们今天学了 Flex 布局以后，是否是很是的简单，妈妈不再用担忧你的布局了。

之因此分享这篇文章，由于我在交流群里看到不少初学者一直在用传统的 DIV 进行布局，因此简单的经过一篇文章的介绍，让你知道除了传统布局外，还有 Flex 布局、网格布局，在快捷的布局就是UI框架了。好比Bootstrap、Element-ui等。

通常框架会在项目开发中使用的较多，对于初学者的话，仍是建议本身亲手搭建布局，上边几个 Flex 属性是经常使用的，若是想深刻学习，请查看官方文档。

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

文章+动画写了好几个小时，不妨点赞支持一下。嘻嘻，你不点赞说明你很自私，你怕那么好的文章让别人也看到。开个小小玩笑。

能够关注小鹿公众号：「小鹿动画学编程」，后台回复：“资源”。送你一份小鹿以前自学的资料和拉你进免费学习群哦！

做者Info：

【做者】：小鹿

【原创公众号】：小鹿动画学编程。

【简介】：和小鹿同窗一块儿用动画的方式从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈献给小伙伴。先定个小目标，原创 1000 篇的动画技术文章，和各位小伙伴共同努力一块儿学习！公众号回复 “资料” 送一从零自学资料大礼包！

【转载说明】：转载请说明出处，谢谢合做！~