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

Question

我刚刚注意到一些我以前从未见过的 align-self 属性的值。 What are start , end , self-start , and self-end and what are their differences from flex-start and flex-end ?

当我使用 flexbox 时，我经常参考 CSS-Tricks 上的指南，但它没有提到这些值。我在 MDN 阅读了 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>

原文由 Vince 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

所以你看到的是新的值，它们最终将取代现有的特定于布局的值。

以下是 flexbox 规范中的描述：

§ 1.2。模块交互

The CSS Box Alignment Module extends and supercedes the definitions of the alignment properties ( justify-content , align-items , align-self , align-content ) introduced here.

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

§ 10.1。排水沟： row-gap 、 column-gap 和 gap 属性

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

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

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议