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

 

Box Alignment 规范详细说明了对齐(alignment)在各种布局方法中的工作原理; 在此页面中,我们将探讨盒子对齐(box aligment)在Flexbox环境中的工作原理。 由于此页面旨在详细说明特定于Flexbox和框对齐的内容,因此应与Box Alignment 页面一起阅读,该页面详细说明了不同布局方法的框对齐的常见方法。

基础示例

在此示例中,使用justify-content在主轴上对齐三个弹性元素(flex items),并使用align-items在十字轴上对齐。 第一个元素通过将align-self设置为居中来覆盖在父元素设置的align-items值。

轴 与 flex-direction

Flexbox与文档的写入模式有关,因此如果您使用英语并将justify-content设置为flex-end,则会将项目对齐到Flex容器的末尾。 如果您将flex-direction设置为行,则此对齐将处于内联方向。

但是,在Flexbox中,您可以通过将flex-direction设置为column来更改主轴。 在这种情况下,justify-content将在块方向上对齐项目。 因此,在Flexbox中工作时最容易考虑主轴和纵轴,如下所示:

  • 主轴由flex-direction设置方向,通过justify-content 属性对齐
  • 纵轴穿过主轴,通过align-contentalign-self / align-items对齐

主轴

纵轴

justify-self 在 Flexbox布局中失效

在主轴上,Flexbox将我们的内容作为一个组进行处理。 计算布置子元素所需的空间量,然后剩余空间可用于分配。 justify-content属性控制剩余空间的使用方式。 设置justify-content:flex-end,额外空间放在所有子元素之前,justify-content:space-around,它放在该维度的子元素的两侧,等等。

这意味着在Flexbox中,justify-self属性没有意义,因为我们总是处理移动整个元素组。

在十字轴上,align-self是有意义的,因为我们可能在该维度中的flex容器中有额外的空间,其中单个元素可以移动到开始和结束位置。

对齐 与 auto margins

在Flexbox中有一个特定的用例,我们可能会认为justify-self是我们需要的,这就是我们想要分割一组flex items,也许是为了创建一个分割导航模式。 对于此用例,我们可以使用自动边距。 设置为auto的边距将吸收其维度中的所有可用空间。 这就是以自动边距为中心的块的工作原理。 通过将左右边距设置为auto,我们块的两侧都会尝试占用所有可用空间,因此将盒子推入中心。

通过在一组弹性项目中的一个项目上设置auto的margin全部对齐以开始,我们可以创建拆分导航。 这适用于Flexbox和对齐属性。 一旦没有可用于自动边距的空间,该项目的行为与所有其他弹性项目的行为相同,并且收缩以尝试适合空间。

gap 属性

在子元素之间创建固定大小的差距

在主轴上,column-gap属性将在相邻项之间创建固定大小的间隙。

在纵轴上,row-gap属性将在相邻的子元素之间创建间距,因此还必须将flex-wrap设置为wrap,以使其具有任何效果。

注意: 从Firefox 63开始,Firefox是唯一实现Flexbox gap属性的浏览器。

Reference

CSS Properties

Glossary Entries

Guides

External Resources

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, DecadeCode
最后编辑者: mdnwebdocs-bot,