Flexbox：flex-start、self-start、start；有什么不同？

Question

我刚刚注意到align-self 属性的一些值，这是我以前从未见过的。什么是start、end、self-start和self-end，它们与flex-start和flex-end有什么区别？

当我使用 flexbox 时，我经常提到 the guide at CSS-Tricks，但它没有提到这些值。我在 MDN 上阅读了documentation for align-self，但对值的单行描述不足以让我理解。

我想我也许可以玩弄这些值来弄清楚，但它们似乎都做同样的事情......

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: papayawhip;
  width: 400px;
  height: 200px;
  margin: 1rem auto;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
}

.block {
  color: white;
  font-size: 3em;
  font-family: sans-serif;
  padding: 0.5rem;
  margin: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-1 {
  background: red;
}

.block-2 {
  background: orange;
}

.block-3 {
  background: gold;
}

.block-4 {
  background: green;
}

.block-5 {
  background: blue;
}

.block-2 {
  align-self: flex-start;
}

.block-3 {
  align-self: start;
}

.block-4 {
  align-self: self-start;
}

<div class="container">
  <div class="block block-1">1</div>
  <div class="block block-2">2</div>
  <div class="block block-3">3</div>
  <div class="block block-4">4</div>
  <div class="block block-5">5</div>
</div>

Answer 1

flex-end 和 flex-start（以及其他）值是为与 flex layout 一起使用而创建的。

不过，W3C 一直在开发Box Alignment Module，它建立了一组通用的对齐属性和值，可用于多个盒子模型，包括 flex、grid、table 和 block。

因此，您看到的是新的值，它们最终将取代现有的特定于布局的值。

这是 flexbox 规范中的描述方式：

§ 1.2. Module interactions

CSS 框对齐模块扩展并取代了 对齐属性 (justify-content, align-items, align-self, align-content) 介绍到这里。

Grid 规范中有类似的语言。这是一个例子：

§ 10.1. Gutters: the row-gap, column-gap, and gap properties

row-gap 和 column-gap 属性（以及它们的 gap 简写）， 当在网格容器上指定时，定义网格之间的间距 行和网格列。它们的语法在CSS Box Alignment 3 §8 Gaps Between Boxes 中定义。

最初的属性——grid-row-gap、grid-column-gap 和 grid-gap——并没有持续多久。虽然，为了向后兼容，我相信它们仍然受到尊重。

Answer 2

flex-start 考虑了弹性方向的-reverse 值的存在，而start 没有。

例如，在从左到右的书写模式中，将 flex 容器设置为 flex-direction:row-reverse，justify-content:start 将导致所有项目向左对齐，而 justify-content:flex-start 将导致所有项目对齐向右。

div {
  padding: 4px;
  border: 1px solid red
}

#div1 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start
}

#div2 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start
}

<ul>
  <li><code>align-content: start</code>
    <div id=div1>
      <div>Flex 1</div>
      <div>Flex 2</div>
    </div>
  </li>
  <br>
  <li><code>align-content: flex-start</code>
    <div id=div2>
      <div>Flex 1</div>
      <div>Flex 2</div>
    </div>
  </li>
</ul>

2019 年 7 月 15 日编辑

所描述的 不同 行为在 Firefox 浏览器中是正确的（至少在 68 之前），而在 Chrome 中，正如 diachedelic 的评论中所指出的，这两个属性在相同的情况下工作方式

Answer 3

Rachel Andrew 的https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/ 正是我认为这个问题的最佳答案。

她在 Chrome 于 2021 年 7 月开始支持这些属性的同时写了这篇文章。

关键是

start 和 end 是相对流的，与写作方式和脚本方向有关。 self-start 和 self-end 值也是流相关的，但它们与对齐主题的书写模式和方向有关，在本例中是一个 flex 项目。