【译】start、flex-start 和 slef-start 有什么区别？

原文：What's the difference between the alignment values of start, flex-start, and self-start?

作者：Rachel Andrew

当我们需要在 Flexbox 中左对齐或右对齐 flex 项目时，有好些个属性值可供我们选择。在这篇文章中，我将解释以下几个含义非常相似的属性值之间的区别。

• flex-start 和 flex-end
• start 和 end
• self-start 和 self-end

Firefox 和 Chrome Canary 浏览器已支持start,end,self-start和self-end属性值，Chrome 在 93 版本添加了对它们的支持。运行本文中的 demo 需要你使用支持这几个属性的浏览器。

几个 flexbox 术语

在本文中我会用到一些有助于理解 flexbox 中对齐方式的术语。如果你想深入了解盒子对齐规范中更多关于这个主题的内容，了解这些术语也会对你有所帮助。

对齐容器

flex 项目的父元素，即声明了diaplay: flex的元素。

对齐对象

即 flex 项目，参与对齐的元素。

主轴

即flex-direction属性值表示的方向。如果flex-direction属性值为row，主轴即为row。

交叉轴

flex-direction属性值的垂直方向。如果flex-direction属性值为row，交叉轴即为column。

主轴原点和主轴终点

主轴的起始点和结束点。

交叉轴原点和交叉轴终点

交叉轴的起始点和结束点。

注意，除了flex-start和flex-end这两个特定用于 flexbox 的值之外，其它值都可以在任何支持对齐的格式化上下文中使用，比如 CSS Grid 布局。

对比 flex-start/flex-end 和 start/end

在下面这个示例中，有一个 flex 容器（对齐容器），内部有两个 flex 项目（对齐对象）。flex-direction初始值为row。

通过下拉框切换justify-content属性值。当flex-direction: row时， flex-start和start表现一致，flex-end和end也是如此。

然而，将flex-direction切换为row-reverse时，你就会发现不同之处了。此时，主轴原点和主轴终点被交换，原点在右而终点在左。不过这并没有改变文本方向，文本方向仍然是从左到右。

现在试着切换一下justify-content的不同属性值。你会发现flex-end会将 flex 项目移动到左边—— flex 容器的主轴终点。使用end时，flex 项目会移动到右边——容器文档流的终点。

尝试在容器上使用direction:rtl进行演示，看看当文本方向改变时这些属性值是如何工作的。

因此，如果你希望元素与flex-direction定义的终点对齐，使用flex-end属性。如果希望其与对齐容器的终点对齐，则使用end属性。

对比 self-start/self-end 和 start/end

通过上一个示例，我们已经了解到start和end是相对于“流”的，与书写模式和脚本方向有关。self-start和slef-end同样也是相对于“流”的，但它们与对齐对象（即 flex 项目）的书写模式和方向相关。

要了解它们是如何工作的，请看下面的 demo。容器内部包含三个 flex 项目。容器的flex-direction属性值为column，因此它的交叉轴方向为row。第二个 flex 项目指定了direction: rtl。

当align-items: start时，所有项目靠左对齐，这是因为容器具有从左到右的方向。然而，将其更改为align-items: self-start，第二个项目会对齐到 flex 容器的终点——其文档流的相对起始位置。

因此，当需要让项目遵循对齐容器的方向或书写模式时，可以使用start和end属性。而当需要让项目遵循对齐对象的书写模式或方向时，可以使用self-start和self-end属性。