Box alignment in Flexbox

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