css flexbox模型_Flexbox-Ultimate CSS Flex速查表（带有动画图！）

css flexbox模型

This comprehensive CSS flexbox cheatsheet will cover everything you need to know to start using flexbox in your web projects.

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

CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill the space. It makes responsive design easier.

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

CSS flexbox is great to use for the general layout of your website or app. It's easy to learn, is supported in all modern browsers, and it doesn't take that long to figure out the basics. By the end of this guide, you'll be ready to start using flexbox in your web projects.

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

The article includes helpful animated gifs from Scott Domes which will make flexbox even easier to understand and visualize.

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

所有CSS Flexbox属性 (All CSS Flexbox properties)

Here is a list of all the CSS flexbox properties that can be used to position elements in CSS. Next, you'll see how they work.

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

可以应用于容器CSS (CSS that can be applied to the container)

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 (CSS that can be applied to items/elements in the container)

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;

术语 (Terminology)

Before you learn what the flexbox properties do, it's important to understand the associated terminology. Here are definitions of the key flexbox terms, taken from the official W3C specification for flexbox.

在学习flexbox属性之前，了解相关术语非常重要。以下是Flexbox关键术语的定义，这些术语取自Flexbox的官方W3C规范。

main-axis: The main axis of a flex container is the primary axis along which flex items are laid out. The direction is based on the flex-direction property.

main-axis ：伸缩容器的主轴是沿其放置伸缩项的主轴。方向基于flex-direction属性。
main-start | main-end: The flex items are placed within the container starting on the main-start side and going toward the main-end side.

主启动| 主端：将伸缩项放置在容器中，从主起点侧开始，朝着主终点侧延伸。
main size: The width or height of a flex container or flex item, whichever is in the main dimension, is that box’s main size. Its main size property is thus either its width or height property, whichever is in the main dimension.

主要尺寸 ：柔性容器或柔性物品的宽度或高度(以主要尺寸为准)为该盒子的主要尺寸。因此，其主要尺寸属性是宽度或高度属性，无论是在主要尺寸中。
cross axis: The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.

横轴：垂直于主轴的轴称为横轴。其方向取决于主轴方向。
cross-start | cross-end: Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.

交叉启动| cross-end ：Flex线填充有项目，并从flex容器的交叉起点侧开始朝着交叉端侧放置到容器中。
cross size: The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

交叉尺寸 ：柔性商品的宽度或高度(以交叉尺寸为准)是该商品的交叉尺寸。交叉尺寸属性是交叉尺寸中“宽度”或“高度”中的任何一个。

CSS Display Flex (CSS Display Flex)

display: flex is tells your browser, "I wanna use flexbox with this container, please."

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中四个彩色div的示例：

To use flexbox on a section of your page, first convert the parent container to a flex container by adding display: flex; to the CSS of the parent container.

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

This will initialize this container as a flex container and apply some default flex properties.

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

弯曲方向 (Flex Direction)

flex-direction allows you to control how the items in the container display. Do you want them left to right, right to left, top to bottom, or bottom to top? You can do all of these easily by setting the flex-direction of the container.

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

The default arrangement after applying display: flex is for the items to be arranged along the main axis from left to right. The animation below shows what happens when flex-direction: column is added to the container element.

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

You can also set flex-direction to row-reverse and column-reverse.

您还可以将flex-direction设置为row-reverse和column-reverse 。

证明内容合理 (Justify Content)

justify-content is a property to align items in the container along the main axis (see terminology diagram above). This changes depending on how content is displayed. It allows us to fill any empty space on rows and define how we want to ‘justify’ it.

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

Here are our the most common options used to justify content: flex-start | flex-end | center | space-between | space-around.

Here is what the different options look like:

不同的选项如下所示：

space-between distributes items so that the first item is flush with the start and the last is flush with the end. space-around is similar but items have a half-size space on either end.

space-between分布项目，以便第一个项目与开头齐平，最后一个与结尾齐平。 space-around类似，但是物品的两端都有一半大小的空间。

弹性对齐项目 (Flex Align Items)

align-items allows us to align items along the cross axis (see terminology diagram above). This allows content to be positioned in many different ways using justify content and align items together.

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

Here are the most common options used to align items: flex-start | flex-end | center | baseline | stretch

For stretch to work how you would expect, the height of the elements must be set to auto instead of a specific height.

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

This animation shows what the options look like:

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

Now we'll use both justify-content and align-items. This will show off the difference between the main axes and the cross axes.

现在，我们将同时使用justify-content和align-items 。这将显示主轴和交叉轴之间的差异。

自我对齐 (Align Self)

align-self allows you to adjust the alignment of a single element.

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

It has all the same properties of align-items.

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

In the following animation, the parent div has the CSS align-items: center and flex-direction: row. The first two squares cycle through different align-self values.

在下面的动画中，父div具有CSS align-items: center和flex-direction: row 。前两个正方形在不同align-self值之间循环。

弹性包装 (Flex Wrap)

Flexbox by default will try to fit all elements into one row. However, you can change this with the flex-wrap property. There are three values you can use to determine when elements go to another row.

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

The default value is flex-wrap: nowrap. This will cause everything to stay in one row from left to right.

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

flex-wrap: wrap will allow items to pop to the next row if there is not enough room on the first row. The items will be displayed from left to right.

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

flex-wrap: wrap-reverse also allows items to pop to the next row but this time the items are displayed from right to left.

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

弹性流 (Flex Flow)

flex-flow combines the use of flex-wrap and flex-direction into one property. It is used by first setting the direction and then the wrap. Here is an example: flex-flow: column wrap;

flex-flow将flex-wrap和flex-direction的使用结合为一个属性。首先设置方向，然后设置环绕效果。这是一个示例： flex-flow: column wrap;

对齐内容 (Align Content)

align-content is used for aligning items with multiple lines. It is for aligning on the cross axis and will have no effect on content that is one line.

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

Flexbox垂直居中 (Vertically Centering with Flexbox)

If you want to vertically center all the contents inside a parent element, use align-items. Here is the code to use:

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

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

游戏与应用 (Games and Apps)

If you want to practice using flexbox, try out these games and apps that will help you master flexbox.

如果您想练习使用Flexbox，请尝试这些可帮助您掌握Flexbox的游戏和应用程序。

Flexbox Defense is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.

Flexbox防御是一款网络游戏，您可以在其中学习flexbox，同时尝试阻止传入的敌人越过防御。
Flexbox Froggy is a game where you help Froggy and friends by writing CSS code.

Flexbox Froggy是一款游戏，您可以通过编写CSS代码来帮助Froggy和朋友。
Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.

Flexyboxes是一个应用程序，可让您查看代码示例并更改参数以查看Flexbox的视觉工作方式。
Flexbox Patters is a website that shows off a bunch of Flexbox examples.

Flexbox Patters是一个网站，展示了许多Flexbox示例。

结论 (Conclusion)

We've covered all the most common CSS flexbox properties. The next step is practice! Try making a few projects using flexbox so you can get used to how it works.

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

翻译自: https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/

css flexbox模型