一劳永逸的搞定 flex 布局

若文章排版不清或需要查看文中链接，请点击文章左下角的“阅读原文”

紧跟技术风向标，不迷失但也绝不落后，Go技术大全公众号正式开启，欢迎关注。

寻根溯源话布局

一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到?float?属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在?float: center?的写法，那么?text-align: center、verticle-align: center?是否可行呢？答案也是否定的。这两个属性只能用于行内元素，对于块级元素的布局是无效的。

在网页布局没有进入 CSS 的时代，排版几乎是通过?table?元素实现的，在?table?的单元格里可以方便的使用?align、valign?来实现水平和垂直方向的对齐，随着 Web 语义化的流行，这些写法逐渐淡出了视野，CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用?margin: 0 auto，实现水平垂直同时居中可以如下设置：

.dad { ? ?position: relative;
}

.son { ? ?position: absolute; ? ?margin: auto; ? ?top: 0; ? ?right: 0; ? ?bottom: 0; ? ?left: 0;
}

.son { ? ?width: 100px; ? ?height: 100px; ? ?position: absolute; ? ?top: 50%; ? ?left: 50%; ? ?margin-top: -50px; ? ?margin-left: -50px;
}

然而，这些写法都存在一些缺陷：缺少语义并且不够灵活。我们需要的是通过 1 个属性就能优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。在这样的需求下，CSS 的第 4 种布局方式诞生了，这就是我们今天要重点介绍的 flex 布局。

flex 基本概念

使用 flex 布局首先要设置父容器?display: flex，然后再设置?justify-content: center?实现水平居中，最后设置?align-items: center?实现垂直居中。

#dad { ? ?display: flex; ? ?justify-content: center; ? ?align-items: center
}

就是这么简单，大功告成。等等，好像哪里不对，justify-content?和?align-items?是啥？哪里可以看出横向、竖向的语义？是的，flex 的确没有那么简单，这就要从两个基本概念说起了。