弹性盒布局中的盒对齐方式

基础示例

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

<div class="box">
  <div>一</div>
  <div>二</div>
  <div>三 <br />具有 <br />额外的 <br />文本</div>
</div>

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border: 2px dotted rgb(96 139 168);
}

.box :first-child {
  align-self: center;
}

轴 与 flex-direction

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

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

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

主轴

• justify-content

纵轴

• align-self
• align-items
• align-content

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 和对齐属性。一旦没有可用于自动边距的空间，该项目的行为与所有其他弹性项目的行为相同，并且收缩以尝试适合空间。

<div class="box">
  <div>一</div>
  <div>二</div>
  <div>三</div>
  <div class="push">四</div>
  <div>五</div>
</div>

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  display: flex;
  border: 2px dotted rgb(96 139 168);
}
.push {
  margin-left: auto;
}

gap 属性

• row-gap
• column-gap
• gap

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

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

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

<div class="box">
  <div>一</div>
  <div>二</div>
  <div>三</div>
  <div>四</div>
  <div>五</div>
  <div>六</div>
</div>

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  width: 450px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 2em;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  flex: 1;
}

参考

CSS 属性

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• align-self
• row-gap
• column-gap
• gap

术语条目

• 交叉轴
• 主轴

指南

• 弹性盒布局中的对齐方式