一劳永逸的搞定 flex 布局

<div class="article-content">
<h2 id="-">寻根溯源话布局</h2>
一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 <code>float</code> 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 <code>float: center</code> 的写法，那么 <code>text-align: center</code>、<code>verticle-align: center</code> 是否可行呢？答案也是否定的。这两个属性只能用于行内元素，对于块级元素的布局是无效的。
在网页布局没有进入 CSS 的时代，排版几乎是通过 <code>table</code> 元素实现的，在 <code>table</code> 的单元格里可以方便的使用 <code>align</code>、<code>valign</code> 来实现水平和垂直方向的对齐，随着 Web 语义化的流行，这些写法逐渐淡出了视野，CSS 标准为我们提供了 3 种布局方式：<code>标准文档流</code>、<code>浮动布局</code>和<code>定位布局</code>。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用 <code>margin: 0 auto</code>，实现水平垂直同时居中可以如下设置：
<pre class="blockcode"><code class="hljs css copyable">.dad {
position: relative;
}复制代码</code></pre>
<pre class="blockcode"><code class="hljs css copyable">.son {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}复制代码</code></pre>
<hr>
<pre class="blockcode"><code class="hljs css copyable">.dad {
position: relative;
}复制代码</code></pre>
<pre class="blockcode"><code class="hljs css copyable">.son {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}复制代码</code></pre>
然而，这些写法都存在一些缺陷：缺少语义并且不够灵活。我们需要的是通过 1 个属性就能优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。在这样的需求下，CSS 的第 4 种布局方式诞生了，这就是我们今天要重点介绍的 flex 布局。
<h2 id="flex-">flex 基本概念</h2>
使用 flex 布局首先要设置父容器 <code>display: flex</code>，然后再设置 <code>justify-content: center</code> 实现水平居中，最后设置 <code>align-items: center</code> 实现垂直居中。
<pre class="blockcode"><code class="hljs css copyable">#dad {
display: flex;
justify-content: center;
align-items: center
}复制代码</code></pre>

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

<figure>
 <figcaption></figcaption>
</figure>
说来也不难，flex 的核心的概念就是 容器 和 轴。容器包括外层的 父容器 和内层的 子容器，轴包括 主轴 和 交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性（不含 <code>display: flex</code>），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个，我们就先从常用的说起吧。
<h3 id="1-">1. 容器</h3>
<blockquote>
 容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以

一劳永逸的搞定 flex 布局

浏览过的版块