flexbox

介绍 (Introduction)

Flexbox, also called Flexible Box Module, is one of the two modern layouts systems, along with CSS Grid.

Flexbox，也称为Flexible Box Module，是两个现代布局系统之一，以及CSS Grid。

Compared to CSS Grid (which is bi-dimensional), flexbox is a one-dimensional layout model. It will control the layout based on a row or on a column, but not together at the same time.

与CSS Grid(二维)相比，flexbox是一维布局模型 。 它将基于行或列控制布局，但不能同时控制布局。

The main goal of flexbox is to allow items to fill the whole space offered by their container, depending on some rules you set.

flexbox的主要目标是允许项目填充其容器提供的整个空间，具体取决于您设置的某些规则。

Unless you need to support old browsers like IE8 and IE9, Flexbox is the tool that lets you forget about using

除非您需要支持IE8和IE9等旧版浏览器，否则Flexbox可以让您忘记使用

• Table layouts
  表格布局
• Floats
  浮点数
• clearfix hacks
  clearfix骇客

• display: table hacks

  display: table黑客

Let’s dive into flexbox and become a master of it in a very short time.

让我们进入flexbox，并在很短的时间内成为它的主人。

浏览器支持 (Browser support)

At the time of writing (Feb 2018), it’s supported by 97.66% of the users, all the most important browsers implement it since years, so even older browsers (including IE10+) are covered:

在撰写本文时(2018年2月)，它得到97.66％的用户的支持，多年来所有最重要的浏览器都实现了它，因此即使是较旧的浏览器(包括IE10 +)也都适用：

While we must wait a few years for users to catch up on CSS Grid, Flexbox is an older technology and can be used right now.

尽管我们必须等待几年时间才能让用户赶上CSS Grid，但Flexbox是一项较旧的技术，可以立即使用。

启用Flexbox (Enable Flexbox)

A flexbox layout is applied to a container, by setting

通过设置将flexbox布局应用于容器

display: flex;

or

要么

display: inline-flex;

the content inside the container will be aligned using flexbox.

容器内的内容将使用flexbox对齐。

容器属性 (Container properties)

Some flexbox properties apply to the container, which sets the general rules for its items. They are

一些flexbox属性适用于容器，该容器为其项目设置通用规则。 他们是

• flex-direction

  flex-direction

• justify-content

  justify-content

• align-items

  align-items

• flex-wrap

  flex-wrap

• flex-flow

  flex-flow

对齐行或列 (Align rows or columns)

The first property we see, flex-direction, determines if the container should align its items as rows, or as columns:

我们看到的第一个属性flex-direction ，确定容器是将其项目对齐为行还是列：

• flex-direction: row places items as a row, in the text direction (left-to-right for western countries)

  flex-direction: row地方项目作为行 ，在文本方向(左到右为西方国家)

• flex-direction: row-reverse places items just like row but in the opposite direction

  flex-direction: row-reverse将项目与row但方向相反

• flex-direction: column places items in a column, ordering top to bottom

  flex-direction: column将项目放在列中 ，从上到下排序

• flex-direction: column-reverse places items in a column, just like column but in the opposite direction

  flex-direction: column-reverse将项目放在一列中，就像column一样，但方向相反

垂直和水平对齐 (Vertical and horizontal alignment)

By default items start from the left if flex-direction is row, and from the top if flex-direction is column.

默认情况下，如果flex-direction为row ，则项目从左开始；如果flex-direction为column ，则项目从顶部开始。

You can change this behavior using justify-content to change the horizontal alignment, and align-items to change the vertical alignment.

您可以使用justify-content更改此行为，以更改水平对齐方式，并使用align-items更改垂直对齐方式。

更改水平对齐 (Change the horizontal alignment)

justify-content has 5 possible values:

justify-content有5个可能的值：

• flex-start: align to the left side of the container.

  flex-start ：对齐容器的左侧。

• flex-end: align to the right side of the container.

  flex-end ：对齐容器的右侧。

• center: align at the center of the container.

  center ：对准容器的中心。

• space-between: display with equal spacing between them.

  space-between ：以相等的间距显示。

• space-around: display with equal spacing around them

  space-around等距显示

更改垂直对齐 (Change the vertical alignment)

align-items has 5 possible values:

align-items具有5个可能的值：

• flex-start: align to the top of the container.

  flex-start ：对准容器的顶部。

• flex-end: align to the bottom of the container.

  flex-end ：对准容器的底部。

• center: align at the vertical center of the container.

  center ：对准容器的垂直中心。

• baseline: display at the baseline of the container.

  baseline ：显示在容器的基线处。

• stretch: items are stretched to fit the container.

  stretch ： stretch物品以适合容器。

关于baseline的注释 (A note on baseline)

baseline looks similar to flex-start in this example, due to my boxes being too simple. Check out to have a more useful example, which I forked from a Pen originally created by . As you can see there, items dimensions are aligned.

在本例中， baseline看起来类似于flex-start ，这是因为我的框太简单了。 看看有一个更有用的例子，这是我从最初创建的笔分叉 。 如您所见，项目尺寸已对齐。

包 (Wrap)

By default items in a flexbox container are kept on a single line, shrinking them to fit in the container.

默认情况下，flexbox容器中的项目保持在一行上，将它们缩小以适合该容器。

To force the items to spread across multiple lines, use flex-wrap: wrap. This will distribute the items according to the order set in flex-direction. Use flex-wrap: wrap-reverse to reverse this order.

要强制项目分散在多行中，请使用flex-wrap: wrap 。 这将根据在flex-direction设置的顺序分配项目。 使用flex-wrap: wrap-reverse可以颠倒此顺序。

A shorthand property called flex-flow allows you to specify flex-direction and flex-wrap in a single line, by adding the flex-direction value first, followed by flex-wrap value, for example: flex-flow: row wrap.

称为flex-flow简写属性使您可以在一行中指定flex-direction和flex-wrap ，方法是先添加flex-direction值，然后再添加flex-wrap值，例如： flex-flow: row wrap 。

适用于每一项的属性 (Properties that apply to each single item)

Since now, we’ve seen the properties you can apply to the container.

从现在开始，我们已经看到了可以应用于容器的属性。

Single items can have a certain amount of independence and flexibility, and you can alter their appearance using those properties:

单个项目可以具有一定程度的独立性和灵活性，您可以使用以下属性更改其外观：

• order

  order

• align-self

  align-self

• flex-grow

  flex-grow

• flex-shrink

  flex-shrink

• flex-basis

  flex-basis

• flex

  flex

Let’s see them in detail.

让我们详细了解它们。

使用订单在另一个物品之前/之后移动物品 (Moving items before / after another one using order)

Items are ordered based on a order they are assigned. By default every item has order 0 and the appearance in the HTML determines the final order.

根据项目分配的顺序对项目进行排序。 默认情况下，每个项目的顺序均为0 ，HTML的外观决定了最终顺序。

You can override this property using order on each separate item. This is a property you set on the item, not the container. You can make an item appear before all the others by setting a negative value.

您可以使用每个单独项目上的order覆盖此属性。 这是您在项目而非容器上设置的属性。 您可以通过设置负值使一个项目出现在所有其他项目之前。

使用align-self进行垂直对齐 (Vertical alignment using align-self)

An item can choose to override the container align-items setting, using align-self, which has the same 5 possible values of align-items:

一个项目可以选择使用align-self来覆盖容器的align-items设置，该设置具有align-items 5种可能值：

• flex-start: align to the top of the container.

  flex-start ：对准容器的顶部。

• flex-end: align to the bottom of the container.

  flex-end ：对准容器的底部。

• center: align at the vertical center of the container.

  center ：对准容器的垂直中心。

• baseline: display at the baseline of the container.

  baseline ：显示在容器的基线处。

• stretch: items are stretched to fit the container.

  stretch ： stretch物品以适合容器。

必要时增加或缩小项目 (Grow or shrink an item if necessary)

弹性成长 (flex-grow)

The defaut for any item is 0.

任何项目的默认值为0。

If all items are defined as 1 and one is defined as 2, the bigger element will take the space of two “1” items.

如果将所有项目定义为1，将所有项目定义为2，则较大的元素将占用两个“ 1”项目的空间。

弯曲收缩 (flex-shrink)

The defaut for any item is 1.

缺省值为1。

If all items are defined as 1 and one is defined as 3, the bigger element will shrink 3x the other ones. When less space is available, it will take 3x less space.

如果将所有项目定义为1，将一个项目定义为3，则较大的元素将缩小为其他项的3倍。 如果可用空间较少，则占用的空间将减少3倍。

弹性基础 (flex-basis)

If set to auto, it sizes an item according to its width or height, and adds extra space based on the flex-grow property.

如果设置为auto ，它将根据项目的宽度或高度调整其大小，并根据flex-grow属性添加额外的空间。

If set to 0, it does not add any extra space for the item when calculating the layout.

如果设置为0，则在计算布局时不会为该项目添加任何额外的空间。

If you specify a pixel number value, it will use that as the length value (width or height depends if it’s a row or a column item)

如果您指定像素数字值，它将使用它作为长度值(宽度或高度取决于它是行还是列项目)

柔性 (flex)

This property combines the above 3 properties:

此属性结合了以上3个属性：

• flex-grow

  flex-grow

• flex-shrink

  flex-shrink

• flex-basis

  flex-basis

and provides a shorthand syntax: flex: 0 1 auto

并提供了简写语法： flex: 0 1 auto

翻译自:

flexbox