flex垂直居中_动画 | 一文掌握 Flex 布局

写在前边

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

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

第一种实现方式：

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

第二种实现方式：

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

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

第三种实现方式：

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

其实垂直居中网页布局中传统实现方式很多种，但是这么多种不同情况下进行选择太麻烦了，我们有没有规定一个方式就能无论是行内元素还是块元素就能实现垂直居中呢？

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

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

完整代码实现如下：

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

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

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

思维导图