Open felix-cao opened 5 years ago
如何实现网页元素中的 水平居中、垂直居中？
在网页布局没有进入 CSS 的时代，排版几乎是通过 table 元素实现的，在 table 的单元格里可以方便的使用 align、valign 来实现水平和垂直方向的对齐。
随着 Web 语义化的流行，这些写法逐渐淡出了视野，CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求。
然而，这些写法都存在一些缺陷：缺少语义并且不够灵活。我们需要的是通过 1 个属性就能优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。于是，CSS 的第 4 种布局方式诞生了，也就是我们本篇要介绍的 flex 布局。
使用 flex 布局首先要设置父容器 display: flex
容器 和 轴 是 flex 的核心的概念 。容器包括外层的 父容器 和内层的 子容器，轴包括 主轴 和 交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性（不含 display: flex），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个。
容器具有这样的特点：
父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准
justify-content 属性用于 定义如何沿着主轴方向排列子容器。
flex-start：起始端对齐
flex-end：末尾段对齐
center：居中对齐
space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。
space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。
align-items 属性用于 定义如何沿着交叉轴方向分配子容器的间距。
baseline：基线对齐，这里的 baseline 默认是指首行文字，即 first baseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。
stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。
如何实现网页元素中的 水平居中、垂直居中？
在网页布局没有进入 CSS 的时代，排版几乎是通过 table 元素实现的，在 table 的单元格里可以方便的使用 align、valign 来实现水平和垂直方向的对齐。
随着 Web 语义化的流行，这些写法逐渐淡出了视野，CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求。
然而，这些写法都存在一些缺陷：缺少语义并且不够灵活。我们需要的是通过 1 个属性就能优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。于是，CSS 的第 4 种布局方式诞生了，也就是我们本篇要介绍的 flex 布局。
一、flex 基本概念
使用 flex 布局首先要设置父容器 display: flex
容器 和 轴 是 flex 的核心的概念 。容器包括外层的 父容器 和内层的 子容器，轴包括 主轴 和 交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性（不含 display: flex），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个。
二. 容器
容器具有这样的特点：
1 父容器的第一个属性 justify-content， 有5个值
justify-content 属性用于 定义如何沿着主轴方向排列子容器。
2 父容器的第二个属性 align-items, 有5个值
align-items 属性用于 定义如何沿着交叉轴方向分配子容器的间距。
Reference