基础示例
在此示例中，使用justify-content在主轴上对齐三个弹性元素（flex items），并使用align-items在十字轴上对齐。第一个元素通过将align-self设置为居中来覆盖在父元素设置的 align-items 值。
html
具有
额外的
文本
.box > * {
padding: 20px;
border: 2px solid rgb(96 139 168);
border-radius: 5px;
background-color: rgb(96 139 168 / 0.2);
}
css.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 和对齐属性。一旦没有可用于自动边距的空间，该项目的行为与所有其他弹性项目的行为相同，并且收缩以尝试适合空间。
html
.box > * {
padding: 20px;
border: 2px solid rgb(96 139 168);
border-radius: 5px;
background-color: rgb(96 139 168 / 0.2);
}
css.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,以使其具有任何效果。
html
.box > * {
padding: 20px;
border: 2px solid rgb(96 139 168);
border-radius: 5px;
background-color: rgb(96 139 168 / 0.2);
}
css.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
术语条目
交叉轴
主轴
指南
弹性盒布局中的对齐方式
帮助改进 MDN
此页面对您有帮助吗？
是
否
了解如何参与贡献
此页面最后更新于 2025年11月10日，由 MDN 贡献者更新。
在 GitHub 上查看此页面 • 报告此内容的问题