Flexbox – 终极的CSS Flex Cheatsheet(带有动画图表!)

本文概述

• 所有CSS Flexbox属性
• 术语
• CSS Display Flex
• 弯曲方向
• 证明内容合理
• Flex对齐项目
• 自我对齐
• Flex包装
• Flex流
• 对齐内容
• 使用Flexbox垂直居中
• 游戏和应用
• 结论

这份全面的CSS flexbox备忘单将介绍在Web项目中开始使用flexbox所需的所有知识。

CSS flexbox布局使你可以轻松地格式化HTML。 Flexbox使使用行和列垂直和水平对齐项目变得简单。项目将“弯曲”到不同的大小以填充空间。它使响应式设计更加容易。

CSS flexbox非常适合用于网站或应用的总体布局。它易于学习, 并且在所有现代浏览器中均受支持, 并且花很短的时间就可以掌握基本知识。在本指南结束时, 你将准备开始在Web项目中使用flexbox。

本文包括Scott Domes提供的有用的gif动画, 这将使flexbox更加易于理解和可视化。

所有CSS Flexbox属性

这是可用于在CSS中定位元素的所有CSS flexbox属性的列表。接下来, 你将看到它们如何工作。

可以应用于容器的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术语图

W3C官方规范

.

在学习flexbox属性之前, 了解相关术语非常重要。以下是从flexbox的官方W3C规范中获得的主要flexbox术语的定义。

• 主轴：伸缩容器的主轴是伸缩项目沿其布置的主轴。方向基于flex-direction属性。
• 主启动| main-end：将伸缩项放置在容器中, 从主起点侧开始, 朝着主终点侧延伸。
• 主要尺寸：Flex容器或Flex物品的宽度或高度(以主要尺寸中的较大者为准)为该盒子的主要尺寸。因此, 其主要尺寸属性是宽度或高度属性, 无论是在主要尺寸中。
• 横轴：垂直于主轴的轴称为横轴。其方向取决于主轴方向。
• 交叉启动|交叉端：Flex线中充满了物品, 并从Flex容器的交叉起点侧开始朝交叉端侧放置到容器中。
• 十字尺寸：柔性物品的宽度或高度(以十字尺寸中的较大者为准)为该物品的十字尺寸。交叉尺寸属性是交叉尺寸中的“宽度”或“高度”中的任何一个。

CSS Display Flex

显示：flex告诉你的浏览器, “我想在此容器中使用flexbox”。

div元素默认为display：block。具有此显示设置的元素将占用其所在行的全部宽度。这是具有默认显示设置的父div中四个彩色div的示例：

要在页面的某个部分上使用flexbox, 请先通过添加display：flex;将父容器转换为flex容器。到父容器的CSS。

这会将这个容器初始化为flex容器, 并应用一些默认的flex属性。

弯曲方向

flex-direction使你可以控制容器中项目的显示方式。你要它们从左到右, 从右到左, 从上到下还是从下到上？你可以通过设置容器的弯曲方向来轻松完成所有这些操作。

应用显示后的默认排列：flex用于将项目沿主轴从左到右排列。下面的动画显示了将flex-direction：列添加到容器元素时会发生的情况。

你还可以将flex-direction设置为行反向和列反向。

证明内容合理

justify-content是使容器中的项目沿主轴对齐的属性(请参见上面的术语图)。这取决于显示内容的方式。它使我们可以填充行上的任何空白空间, 并定义我们要如何“合理化”它。

这是我们用来证明内容合理的最常用选项：flex-start |柔性端|中心|间隔|周围的空间。

不同的选项如下所示：

空格之间分布项目, 以便第一个项目与开头齐平, 最后一个与结尾齐平。周围空间类似, 但是物品的两端都有一半大小的空间。

Flex对齐项目

align-items允许我们沿横轴对齐项目(请参见上面的术语图)。这允许使用证明内容并将项目对齐在一起以多种不同方式放置内容。

以下是用于对齐项目的最常用选项：flex-start |柔性端|中心|基线|伸展

为了使拉伸达到预期效果, 必须将元素的高度设置为auto而不是特定的高度。

该动画显示了选项的外观：

现在, 我们将同时使用辩解内容和对齐项目。这将显示主轴和交叉轴之间的差异。

自我对齐

align-self允许你调整单个元素的对齐方式。

它具有align-items的所有相同属性。

在下面的动画中, 父div具有CSS对齐项：center和flex-direction：行。前两个正方形在不同的align-self值之间循环。

Flex包装

默认情况下, Flexbox会尝试将所有元素放入一行。但是, 你可以使用flex-wrap属性更改此设置。你可以使用三个值来确定元素何时移至另一行。

默认值为flex-wrap：nowrap。这将导致所有内容从左到右排成一排。

flex-wrap：如果第一行没有足够的空间, 则wrap将允许项目弹出到下一行。这些项目将从左到右显示。

flex-wrap：wrap-reverse还允许项目弹出到下一行, 但是这次项目从右向左显示。

Flex流

flex-flow将flex-wrap和flex-direction的使用结合为一个属性。首先设置方向, 然后设置环绕即可使用。这是一个示例：flex-flow：换行；

对齐内容

align-content用于对齐多行的项目。它用于在横轴上对齐, 并且对一行的内容没有影响。

以下是选项：align-content：flex-start |柔性端|中心|间隔|周围空间|伸展;

使用Flexbox垂直居中

如果你想将所有内容垂直居中放置在父元素中, 请使用align-items。这是要使用的代码：

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

游戏和应用

如果你想练习使用Flexbox, 请尝试以下可帮助你掌握Flexbox的游戏和应用程序。

• Flexbox防御是一款网络游戏, 你可以在其中学习flexbox, 同时尝试阻止传入的敌人越过防御。
• Flexbox Froggy是一款游戏, 你可以通过编写CSS代码来帮助Froggy和朋友。
• Flexyboxes是一个应用程序, 可让你查看代码示例并更改参数以查看Flexbox的视觉工作方式。
• Flexbox Patters是一个网站, 展示了许多Flexbox示例。

结论

我们已经介绍了所有最常见的CSS flexbox属性。下一步就是练习！尝试使用flexbox创建一些项目, 以便你习惯它的工作方式。