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一直在开发，它建立了一组通用的对齐属性和值，供跨多个盒子模型使用，包括flex、网格、表和块。

因此，您看到的是最终将替换现有的特定于布局的值的较新值。

以下是flexbox规范中对它的描述：

CSS Box对齐模块扩展并取代了这里介绍的对齐属性(justify-content、align-items、align-self、align-content)的定义。

网格规范中也有类似的语言。下面是一个例子：

,** , and**

在网格容器上指定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会考虑flex方向的-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

我认为瑞秋·安德鲁的https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/就是这个问题的最佳答案。

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

graf的关键是

start和end是相对于流程的，与编写模式和脚本方向相关。自开始值和自结束值也是与流相关的，但它们与对齐主题的写入模式和方向有关，在本例中为flex项。