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

Question

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

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

我以为我可以尝试使用这些值来弄明白，但它们似乎都在做同样的事情......

.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

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

网格规范中有类似的语言。这是一个例子:

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

The row-gap and column-gap properties (and their gap shorthand), when specified on a grid container, define the gutters between grid rows and grid columns. Their syntax is defined in CSS Box Alignment 3 §8 Gaps Between Boxes.

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