这篇翻译不完整。请帮忙从英语翻译这篇文章

flexbox很快引起了网页开发者的兴趣,其中一个原因是它第一次为网络带来了适当的对齐功能。它启用了适当的垂直对齐,所以我们终于可以轻松地将一个盒子居中。在本指南中,我们将详细介绍Flexbox中的对齐和对齐属性的工作原理。

为了使我们的盒子居中,我们使用align-items属性来将我们的项目对齐在横轴上,在这种情况下是垂直运行的块轴。我们justify-content用来对齐主轴上的项目,在这种情况下,内联轴水平运行。

一个包含另一个盒子的元素在其中心。

 

你可以看看下面这个例子的代码。更改容器或嵌套元素的大小,嵌套元素始终保持居中。

控制对齐的属性

我们将在本指南中查看的属性如下所示。

  • justify-content - 控制主轴上所有项目的对齐。
  • align-items - 控制交叉轴上所有项目的对齐。
  • align-self - 控制交叉轴上的单个flex item的对齐。
  • align-content - 控制“多条主轴”的flex items在交叉轴的对齐。

我们会发现margin: auto属性是如何对齐flex items。

 

Note: 这些Flexbox的对齐属性已经纳入 CSS Box Alignment Level 3标准里了。预计这特性将最终会取代之前在Flexbox Level One定义的属性。

交叉轴

align-items 和align-self 是控制我们的flex items在交叉轴的对齐,如果 flex-direction 是 row 则是控制竖向对齐,反之 flex-direction 是 column 则是控制横向对齐。

我们正在用一个最简单的例子做交叉轴对齐。如果我们在父级的容器元素上添加display: flex 属性,那么容器里的所有子元素将会变成横向排列的flex items。所有的flex items会撑满交叉轴方向的高度,因为display: flex 属性会将flex items的高定义成容器的高度。如果你的父级容器有设置高度,则flex items会撑满整个父级容器的高度,不会管flex items里的内容的多少。

三个项目,其中一个附加文本使其比其他文件更高。

三项拉伸到200像素高

flex items的高度全都变成一样的原因是 align-items 属性的初始值设成 stretch 控制交叉轴对齐。

我们可以使用其他的值来控制flex items的对齐方式:

  • align-items: flex-start  flex items的开始端的对齐
  • align-items: flex-end flex items的结束端对齐
  • align-items: center flex items居中对齐
  • align-items: stretch flex items撑满container
  • align-items: baseline flex items的baseline对齐

下面的例子中,align-items 的值为 stretch 。尝试给 align-items 赋上其他的值然后看下在flex container下是什么样的对齐效果。

 

 align-self 用于对齐单个flex item

align-items 属性是给所有flex items统一设置 align-self 的对齐属性。这意味着你能给单个flex item明确地声明 align-self 属性。align-self 拥有 align-itmes 的所有属性值,另外还有一个 auto 能重置自身的值为 align-items 定义的值。

在下面的一个例子中,flex container为 align-items: flex-start,这意思是所有的flex items都在交叉轴方向的开始端对齐。我用 first-child 选择器给第一个flex item设置了 align-items: stretch ;另外一个flex item 用selected的类设置成 align-items: center 。你能试着改变 align-items 或者在单个 align-self 的值,可以发现这些值是怎么影响对齐的。

 

改变主轴方向

到目前为止我们已经看到了我们的 flex-direction 是 row 和使用的语言的书写方式为从上至下的表现行为。这意味着主轴是水平方向,交叉轴对齐则是有上至下垂直方向。

三个项目,第一个对齐到flex-start,第二个到中心,第三个到flex-end。 在垂直轴上对齐。

如果我们改变我们的 flex-direction 为 column ,align-items 和 align-self 对齐的flex items则是水平方向从左往右。

三个项目,第一个对齐到flex-start,第二个到中心,第三个到flex-end。 在水平轴上对齐。

你能在下面这个例子体验一下,它除了 flex-directioncolumn 这个属性,其他的属性值和前一个例子是一样的。

 

轴对齐内容---align-content属性

到现在为止,我们已经对定义在flex-container里的flex items或者单个flex item进行对齐操作了。如果你有一个折行的多条flex items的flex container,然后你可能想使用 align-content 来控制每行flex items间的空间的分配,在这种特定的场景叫做packing flex lines

要使得 align-content 生效,你需要你的flex container的height要大于flex items的可视内容。然后它会将所有的flex items打包成一块之后再对齐剩下的空间。

The align-content property takes the following values:

align-content 属性的值如下:

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (没有在Flexbox特性中定义)

在下面的例子,有一个400px高的flex container,能足够地显示flex items。align-content 的值为 space-between 等同于分配flex lines之间的空间。

尝试用其他的属性值查看 align-content 是如何影响布局的。

 

在强调一次我们可以切换我们的  flex-direction 为 column 去观察这个属性的行为是怎样的。和之前一样,我们需要足够的交叉轴空间去显示所有的flex items之外还有有一定的自由空间。

 

Note:  space-evenly 没有在flexbox特性中定义,而是后来添加到Box Alignment的特性的属性。浏览器的支持没有flexbox特性好。

查看  justify-content 在 MDN的文档 获取属性值的浏览器支持的更多详细说明。

对齐主轴内容

到目前我们已经看到flex items是如何在交叉轴上对齐的,现在我们可以看一下主轴上的对齐。这里只有一个属性是用于主轴上对齐--- justify-content 。这是因为我们把所有的flex items当成一个组去处理。用 justify-content 这个属性的时候,我们只控制主轴出显示出来flex items的多余空间。

在我们的最开始的例子中,我们在flex container定义了 display: flex ,flex items则水平排队从container的初始端显示。这是因为 justify-content 的初始值是 flex-start ,其他多余的空间都会显示在flex items的最后。

Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

 justify-content 属性有和 align-content 一样的属性值:

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (没有在flexbox特性中定义)

在下面的例子中, justify-content 的值为 space-between 。在显示完flex items后的可用空间的分配是在flex items水平方向之间。

 

如果主轴方向 flex-direction 设置成 column,那么 justify-content 分配的空间则是纵向的分配。

 

对齐和书写模式

记得这些所有的对齐方法,属性值 flex-start 和 flex-end 是受书写模式的影响的。如果  justify-content 的值是 flex-start 而已你的书写模式是从左到右的话,那么flex items就会从flex container的左边开始排列。

Three items lined up on the left

反之,则会flex items就会从flex container的右边开始排列。

Three items lined up from the right

下面的例子将 direction 属性值设成 rtl 强行让flex items从右到左排列,你可以移除这个属性值或者改变 justify-content 的值,看他是如何影响flex items的排列方向的。

 

Alignment and flex-direction

主轴开始端的排列也会改变如果你改变 flex-direction 的属性 --- 例如使用  row-reverse 代替 row

在下一个例子中,我的 flex-direction: row-reverse 和 justify-content: flex-end 。在一个书写模式为从左到右的语言中,flex items则会从左方开始排列。 尝试将 flex-direction: row-reverse 改为 flex-direction: row 你会看到flex items会从右方开始排列。

 

虽然这看起来有一点困惑,需要记住的规则是  flex-start 是以你书写文本的方向的起始端排列的,除非你对 flex-direction 做了强行的改变。

Diagram showing start on the left and end on the right.

你可以改变块的显示方向 flex-direction: column 。然后设成  flex-start ,排列的方向将会以你文本的第一段为还是排列端。

 

Diagram showing start and the top and end at the bottom.

如果你将 flex-direction 的值改成 row-reverse 或者 column-revers ,则flex items只会从轴的尾端开始排列,这个开始端和尾端是相对于你的文本的书写模式的方向的。

Diagram showing start on the right and end on the left.

Diagram showing end at the top and start at the bottom

使用 auto margins 给主轴对齐定位

我们没有一个有效的 justify-items 或者 justify-self 属性来定义我们的flex items,因为我们的flex items被当成一个组来做对齐处理,然而我们可以使用auto margins来处理一些单个flex item或者多个flex items想和其他flex items分离开的对齐。

一个常见的案例是导航栏有一些items左对齐有一些items右对齐,flex items是从左开始排列的。你可能想这个时候应该使用一个  justify-self ,然后考虑下面图片的情况,我有3个items在左边2个在右边。如果我可以使用  justify-self  在item d的话,那这样也会改变item e的对齐方向,这可能是或者不是我的意图。

 

Five items, in two groups. Three on the left and two on the right.

代替上边的想法,我们可以给item d的 margin-left 设成 auto 。auto margin会占据全部的多余的空间---这就是一个块级元素的margin auto的作用,尽可能的占据足够多的空间。

在这个例子中,我有flex items 最简单的水平排列的属性值,然后我在类 push 有一个  margin-left: auto 。你可以尝试删除它或者把这个类名加到别的item上,然后你可以看到它是怎样影响item的排列的。

 

Future alignment features for Flexbox

At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the space-evenly value for align-content and justify-content properties.

The Box Alignment module also includes other methods of creating space between items, such as the column-gap and row-gap feature as seen in CSS Grid Layout. The inclusion of these properties in Box Alignment means that in future we should be able to use column-gap and row-gap in flex layouts too. This will mean you won’t need to use margins to space out flex items.

在深入探索flexbox对齐时,我的建议是在Grid Layout中查看对齐方式。这两个规格都使用“方框对齐”规范中详细介绍的对齐方式。您可以看到这些属性如何处理网格布局中的MDN文章“ 框对齐”中的网格,而且我还比较了对齐在我的框对齐作业表中如何对齐这些规范

文档标签和贡献者

 此页面的贡献者: coddingBoy, LWBliuwenbo, zhang-hongwei
 最后编辑者: coddingBoy,