Flexbox 中的盒模型对齐

基本示例

在此 flexbox 示例中，三个 flex 项目使用 justify-content 在主轴上对齐，使用 align-items 在交叉轴上对齐。第一个项目通过将 align-self 设置为 center 来覆盖组上设置的 align-items 值。

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

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />has <br />extra <br />text</div>
</div>

.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 设置为 row，则此对齐将沿内联方向进行。

但是，在 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

Flexbox 中没有 justify-self

在主轴上，Flexbox 将 flex 项目作为一个组来处理。计算布局项目所需的空间量，然后将剩余空间用于分配。justify-content 属性控制如何使用剩余空间。设置 justify-content: flex-end，额外空间放置在项目之前；设置 justify-content: space-around，额外空间放置在项目两边，等等。

这意味着 justify-self 属性在 flexbox 中没有意义，因为我们总是处理移动整个项目组。

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

对齐和自动外边距

在 flexbox 中有一个特定的用例，我们可能会认为 justify-self 属性是我们需要的，这就是当我们想要拆分一组 flex 项目时，也许是为了创建一种分体式导航模式。对于此用例，我们可以使用 auto 外边距。设置为 auto 的外边距将吸收其维度中的所有可用空间。这就是使用自动外边距居中块的方式。通过将左外边距和右外边距设置为 auto，块的两侧都试图占据所有可用空间，从而将盒子推到中心。

通过在一组对齐到起始位置的 flex 项目中的一个项目上设置 auto 的 margin，我们可以创建分体式导航。这与 flexbox 和对齐属性配合得很好。一旦没有空间可用于自动外边距，该项目就会以与其他所有 flex 项目相同的方式表现，并收缩以尝试适应空间。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div class="push">Four</div>
  <div>Five</div>
</div>

.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 行之间创建间距，因此 flex-wrap 也必须设置为 wrap 才能使其生效。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

.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 网格布局中的盒模型对齐
• 多列布局中的盒模型对齐
• 块级、绝对定位和表格布局的盒模型对齐
• Flexbox 中的对齐
• 交叉轴
• 主轴