CSS Flexbox 速查表（含动画）

前言

这篇全面的 CSS flexbox 速查表将会涵盖你在 Web 项目中使用 flexbox（弹性盒子）所需要的一切知识。

你可以使用 CSS flexbox 格式化 HTML。利用 flexbox 可以轻松地垂直或水平对齐项目，调整项目尺寸以适应空间。这样可以简化响应式设计。

CSS flexbox 对于网站或应用程序的总体布局是非常理想的。这种方法简单易学，适用于所有的现代浏览器，并且你不需要很多时间就能掌握它的基础知识。看完这篇指南，你就可以开始在你的 Web 项目中使用 flexbox 了。

不同的 CSS Flexbox 属性

下面罗列出各种 CSS flexbox 属性，可以用来在 CSS 中定位元素。

CSS 应用于容器

display: flexbox | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS 应用于容器中的元素

order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

术语

学 flexbox 属性之前，一定要知道相关的术语。下方是主要的 flexbox 术语的定义，来自 W3C 官方规范。

main-axis：flex 项目沿着主轴 main axis 排布，方向是基于 flex-direction 属性的
main-start | main-end：flex 项目在容器中，从 main-start 一侧开始，向 main-end 一侧排列
main size：flex 容器或项目的宽或高作为主尺度，main size 属性就是指这个作为主尺度的尺寸
cross axis：与主轴 main axis 交叉的轴
cross-start | cross-end：项目放置在容器的 flex 网格线之间，从 cross-start 一侧开始，向 cross-end 一侧排列
cross size：flex 项目的宽或高作为主尺度，cross size 属性就是指这个作为主尺度的尺寸

CSS Display Flex

display:flex 告诉浏览器：“我想在容器中使用 flexbox。”

A div element defaults to display:block. An element with this display setting takes up the full width of the line it is on. Here is an example of four colored divs in a parent div with the default display setting:

默认情况下，div元素是 display:block。带有该显示设置的元素将完全占用它所在行的宽度。下面这个例子是一个默认设置的父级 div 包含 4 个彩色的 div。

为了在页面的某一部分使用 flexbox，首先需要给父容器的 CSS 添加 display:flex，把父容器转换成 flex 容器。

这个容器被初始化为一个 flex 容器，并且应用一些默认的 flex 属性。

flex 方向

使用 flex-direction 可以控制如何显示容器中的项目。你想让它们从左到右、从右到左、从上到下还是从下到上？通过为容器设置 flex-direction，可以很容易地实现。

在使用 display:flex 之后，项目默认沿着主轴从左到右排列。以下动画展示向容器项目添加 flex-direction:column 时发生的事情。

你也可以设置 flex-direction 为 row-reverse 或 column-reverse。

Justify Content

justify-content 是一个属性，它使容器中的项目沿着主轴对齐（见上面的术语图表），根据内容如何显示而定。使用这个属性填充行之间的空间，并定义如何安排内容。

这个属性常用的四个选项：flex-start | flex-end | center | space-between | space-around，效果如下：

space-between 让项目保留一定间距地在主轴排列，第一个和最后一个项目会被挤到容器边沿。space-around 是类似的，但头尾两个项目不会紧贴容器边沿，空间会均匀分布在所有项目两边。

Flex Align Items

align-items 将项目沿着横轴（见上面的术语图表），同时使用 justify-content 和 align-items 就可以用多种不同的方法对齐项目。

这里有一些最常用的选项来对齐项目：flex-start | flex-end | center | baseline | stretch。

要想使用 stretch 达到预期效果，元素的高度必须设置为 auto 而非特定高度。

该动画显示选项的样式：

我们现在同时使用 justify-content 和 align-items，会显示主轴和交叉轴的区别。

Align Self

Align-self 用于调整单个元素的位置，具有 align-items 的所有属性。
在下方动画中，父级 div 有 CSS 的 align-items: center和flex-direction: row。前面两个方块根据不同的align-self 值产生变化。

Flex Wrap

flexbox 在默认情况下尝试将所有元素放在一行中。然而，可以使用 flex-wrap 属性来改变这个设置。你可以使用三个值来决定什么时候将元素移动到其他行。

flex-wrap: nowrap为默认值，所有内容会从左到右排列。

如果第一行没有足够的空间，flex-wrap: wrap 可以将项目移到下一行，从左到右显示项目。

flex-wrap: wrap-reverse 也是将项目移到下一行，但项目是从右到左显示的。

Flex Flow

flex-flow 将 flex-wrap 和 flex-direction 组合成一个属性，先设定方向，再设定环绕效果，比如：flex-flow: column wrap;

Align Content

align-content 是用于对齐多行项的，在横轴上对齐，而不影响某一行的内容。

用 Flexbox 垂直居中

若要将所有内容在父元素中垂直居中，可使用 align-items。

.parent {
    display: flex;
    align-items: center;
}

游戏和应用

如果你想练习使用 flexbox，试试这些游戏和应用，它们可以帮助你掌握 flexbox

Flexbox Defense 是一个在线游戏，你可以通过防止敌人穿过你的障碍来学习 flexbox
Flexbox Froggy 这个游戏里你通过写 CSS 编码来帮助 Froggy 和朋友们
Flexyboxes 这个应用允许你查看代码示例和改变参数来查看 flexbox 视觉效果
Flexbox Patters 是一个提供很多 flexbox 示例的网站

总结

本文介绍了 CSS flexbox 最常用的所有属性。接下来就是练习！试着用 flexbox 创建一些项目吧，这样你就能慢慢掌握它。

原文：Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!)，作者：Beau Carnes