还在为垂直居中苦恼？CSS 布局利器 flexbox 轻轻松松帮你搞定

传统的 CSS 布局方式是基于盒模型（它是根据盒子与父盒子以及兄弟盒子的关系肯定大小和位置的算法），实现时依赖于 block, inline, table, position, float 这些属性，但对于一些特殊布局不易实现，好比垂直居中。

Flexbox Layout 是一种新的布局方式，被称为弹性布局，它使得子元素（items）能够灵活的、响应式的适应父容器（flex container）的空间，即便子元素的大小未知或是动态，而且能够很容易实现元素的水平和垂直对齐。

盒模型是基于 block 和 inline 的流动方向进行布局，而 flex 布局则是基于弹性流方向（flex-flow directions），基本思想以下图所示。

flex 容器内的子元素会沿着 main axis（从 main-start 到 main-end ）或 cross axis（从 cross-start 到 cross-end）进行布局，其中：

• main axis - 主轴，子元素排列的基本轴，要注意，它不必定是水平的，这取决于 flex-direction 属性的配置
• main-start | main-end - 子元素从 main-start 开始到 main-end 弹性的放置在容器中，默认都在一行排列，不换行, 除非设置 flex-wrap 属性
• main size - 子元素的主尺寸，若是主轴是水平的，那 width 是主尺寸；垂直的，那 height 是主尺寸
• cross axis - 垂直于主轴的轴，称之为交叉轴，方向取决于主轴的方向
• cross-start | cross-end - 当子元素换行时，每行则从 cross-start 开始到 cross-end 排列
• cross size - 与 main size 同理，只不过恰好相反

Flex Container

使用如下代码就能够将一个 HTML 元素指定为 flex 布局:

.container {
  display: flex; /* or inline-flex */
}
复制代码

这个元素称为 Flex Container，内部其余 HTML 元素被称为 Flex Items。flex 容器 有 6 个属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

肯定主轴的方向，也就是内部元素的弹性排列方向。若是不考虑换行，Flexbox 是单向布局的概念，始终将元素放置在水平行或垂直列中。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
复制代码

• row（默认）: 主轴为水平方向，从左到右排列
• row-reverse: 主轴为水平方向，从右到左排列
• column: 主轴为垂直方向，从上到下排列
• column-reverse: 主轴为垂直方向，从下到上排列

flex-wrap

默认状况下，子元素不会换行，只会在同一行（或列）中放置，可使用此属性设置换行。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
复制代码

• nowrap （默认）: 不换行
• wrap: 换行，第一行在上方
• wrap-reverse: 换行，第一行在下方

flex-flow

它是 flex-direction 和 flex-wrap 属性的缩写.

flex-flow: <'flex-direction'> || <'flex-wrap'>
复制代码

默认是: flex-flow: row nowrap

justify-content

定义子元素在主轴上的对齐方式。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
复制代码

• flex-start （默认）: 左对齐，以主轴的起点对齐
• flex-end: 右对齐，以主轴的终点对齐
• center: 居中，以主轴的中点对齐
• space-between: 两端对齐，子元素间隔相等
• space-around: 子元素两侧的间隔相等，所以，元素之间的间隔正好是与边框间隔的两倍
• space-evenly: 子元素分布排列，而且两个元素的间隔与到边框的间隔相等

align-items

定义子元素在交叉轴上如何对齐。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}
复制代码

• stretch （默认值）: 若是子元素没有指定高度或设为 auto，将会拉伸占满容器的高度
• flex-start: 以交叉轴的起点对齐
• flex-end: 以交叉轴的终点对齐
• center: 以交叉轴的中点对齐
• baseline: 以子元素的第一行文字的基线对齐

align-content

定义容器内部多行元素的行对齐方式，相似于 justify-content 定义主轴内元素的对齐方式。

**注意: **当只有一行元素时，此属性不生效

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
复制代码

• stretch （默认值）：每行拉伸占满整个交叉轴
• flex-start：以交叉轴的起点对齐
• flex-end：以交叉轴的终点对齐
• center：以交叉轴的中点对齐
• space-between：在交叉轴上两端对齐，每行间隔相等
• space-around：每行两侧的间隔相等，所以，行间隔正好是与边框间隔的两倍

Flex Items

Flex 容器内部的子元素也有 6 个属性，分别是：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order

默认状况下，元素按原始顺序排列，可是该属性能够控制元素在 Flex 容器中的显示顺序，数值越小，越靠前，默认为 0。

.item {
  order: <integer>; /* default is 0 */
}
复制代码

flex-grow

定义元素在必要时扩大的能力s，好比容器还有剩余空间。默认为 0，有空间也不扩大。

若是全部元素都设置为 1，那么会均摊容器剩余的空间；若是其中一个元素值为 2，那么它占的剩余空间是其余元素的两倍（至少尽可能会这样作）。

**注意: **负值无效。

.item {
  flex-grow: <number>; /* default 0 */
}
复制代码

flex-shrink

定义元素在必要时缩小的能力，默认为 1，即若是空间不足，该元素将会缩小。

相对的，若是全部元素此属性值都为 1，空间不足时会等比例缩小；若是有一个元素值为 0，其余为 1，空间不足时，前者不缩小。

**注意: **负值无效。

.item {
  flex-shrink: <number>; /* default 1 */
}
复制代码

flex-basis

定义在分配容器剩余空间以前，如何判断子元素的大小，浏览器根据此属性计算主轴剩余空间的大小。

值可设为指定长度（如 20%, 5rem）或关键字（auto）。默认为 auto，元素的大小依据 main size（主尺寸），若是 main size 为 auto，则使用元素内容的最大长度。

.item {
  flex-basis: <length> | auto; /* default auto */
}
复制代码

子元素在弹性扩大时, flex-basis 的不一样可能会形成不同的结果，下图分别是**"绝对"（从0开始算起）弹性和"相对"（从元素内容长度开始算起）**弹性的差别结果。

其中三个子元素 flex-grow 的值为 1:1:2：

• 若是是 flex-basis:0，浏览器会认为子元素大小为 0，剩余空间就是整个容器空间，那么就会把整个容器空间分配成 1:1:2 的比例
• 若是是 flex-basis:auto，浏览器会认为子元素大小就是 width 值，计算出剩余空间，按 1:1:2 的比例分配给这个三个元素

因为浏览器计算主轴剩余空间的大小不一样，因此致使元素弹性结果的不一样。

flex

该属性是 flex-grow, flex-shrink 和 flex-basis 的简写，其中第二个和第三个参数（ flex-shrink 和 flex-basis ）是可选的.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
复制代码

默认是 flex: 0 1 auto, 建议优先使用此属性，它有两个简便使用的关键字: auto(1 1 auto) 和 none(0 0 auto).

align-self

容许元素覆盖默认的或是使用 align-items 指定的对齐方式。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
复制代码

除了 auto, 其余属性值都与 align-items 一致。

**注意: **float, clear 和 vertical-align 对 flex 容器内的元素不生效。

浏览器支持

其中:

• 红色 - 表示版本不支持
• 黄绿色 - 表示带前缀部分支持
• 绿色 - 表示版本支持

最后回到题目的问题，经常使用的垂直居中，只需将 flex 容器的 align-items 和 justify-content 属性值设为 center 便可。

参考: A Complete Guide to Flexbox

搜索公众号「顿悟源码」获取更多源码分析和造的轮子。