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

本文概述

所有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 – 终极的CSS Flex Cheatsheet(带有动画图表!)

文章图片
的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允许我们沿横轴对齐项目(请参见上面的术语图)。这允许使用证明内容并将项目对齐在一起以多种不同方式放置内容。
【Flexbox – 终极的CSS Flex Cheatsheet(带有动画图表!)】以下是用于对齐项目的最常用选项：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。这是要使用的代码：