前言

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

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

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

这篇文章包含了 ScottDomes 制作的 gif 动画,更容易理解。

不同的 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;

术语

W3C 官方规范中的 flexbox 术语图
W3C 官方规范中的 flexbox 术语图

学 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-directionrow-reversecolumn-reverse


Justify Content

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

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

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

Flex Align Items

align-items 将项目沿着横轴(见上面的术语图表),同时使用 justify-contentalign-items 就可以用多种不同的方法对齐项目。

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

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

该动画显示选项的样式:


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

Align Self

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

Flex Wrap

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

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

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

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

Flex Flow

flex-flowflex-wrapflex-direction 组合成一个属性,先设定方向,再设定环绕效果,比如:flex-flow: column wrap;

Align Content

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

包含这些选项:align-content: flex-start | flex-end | center | space-between | space-around | stretch;


用 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