CSS Flexbox: flex-start/flex-end, self-start/self-end, start/end 有何区别

在本文中，我们将介绍 CSS Flexbox 中的 flex-start/flex-end、self-start/self-end 和 start/end 的区别。

阅读更多：CSS 教程

flex-start/flex-end

在 Flexbox 中，flex-start 和 flex-end 是用于定义 flex 容器中的 flex 项目的对齐方式的属性。

flex-start 将 flex 项目对齐到容器的起始位置。如果容器是水平方向的，那么 flex-start 将项目对齐到左边；如果容器是垂直方向的，那么 flex-start 将项目对齐到顶部。

flex-end 则将 flex 项目对齐到容器的结束位置。如果容器是水平方向的，那么 flex-end 将项目对齐到右边；如果容器是垂直方向的，那么 flex-end 将项目对齐到底部。

以下是示例代码：

.container {
  display: flex;
  justify-content: flex-start; /* flex 项目水平方向对齐到容器的左边 */
}

.container {
  display: flex;
  justify-content: flex-end; /* flex 项目水平方向对齐到容器的右边 */
}

.container {
  display: flex;
  align-items: flex-start; /* flex 项目垂直方向对齐到容器的顶部 */
}

.container {
  display: flex;
  align-items: flex-end; /* flex 项目垂直方向对齐到容器的底部 */
}

self-start/self-end

self-start 和 self-end 是用于定义 flex 项目自身的对齐方式的属性。

self-start 将 flex 项目对齐到自身内容的起始位置。如果项目是水平方向的，那么 self-start 将内容对齐到左边；如果项目是垂直方向的，那么 self-start 将内容对齐到顶部。

self-end 则将 flex 项目对齐到自身内容的结束位置。如果项目是水平方向的，那么 self-end 将内容对齐到右边；如果项目是垂直方向的，那么 self-end 将内容对齐到底部。

以下是示例代码：

.item {
  align-self: self-start; /* 项目内容对齐到左边（水平方向）或者顶部（垂直方向） */
}

.item {
  align-self: self-end; /* 项目内容对齐到右边（水平方向）或者底部（垂直方向） */
}

start/end

start 和 end 是用于定义 flex 项目在不同语言书写方向上的对齐方式的属性。

当使用从左到右书写的语言时（例如英语），start 和 end 与 flex-start 和 flex-end 是相同的。

当使用从右到左书写的语言时（例如阿拉伯语、希伯来语），start 和 end 与 flex-start 和 flex-end 就发生了对调。即 start 等同于 flex-end，end 等同于 flex-start。

以下是示例代码：

.container {
  direction: ltr; /* 从左到右书写的语言 */
}

.container {
  direction: rtl; /* 从右到左书写的语言 */
}

.container {
  display: flex;
  justify-content: start; /* flex 项目水平方向对齐到容器的左边（从左到右书写）或者右边（从右到左书写） */
}

.container {
  display: flex;
  justify-content: end; /* flex 项目水平方向对齐到容器的右边（从左到右书写）或者左边（从右到左书写） */
}