Flexbox: гибкий запуск, самозапуск и запуск; Какая разница?

Я просто заметил некоторые значения свойства align-self, которых раньше не видел. Что такое start, end, self-start и self-end и чем они отличаются от flex-start и flex-end?

Когда я работаю с flexbox, я часто обращался к руководству в CSS-Tricks, но оно не упоминает эти значения. Я прочитал документацию по 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>

Ответы

Ответ 1

Значения flex-end и flex-start (среди прочих) были созданы для использования с flex-макетом.

Однако W3C разрабатывает модуль выравнивания блоков, который устанавливает общий набор свойств и значений выравнивания для использования в нескольких моделях блоков, включая flex, grid, table и block.

Итак, вы видите новые значения, которые в конечном итоге заменят существующие специфичные для макета значения.

Вот как это описано в спецификации flexbox:

§ 1.2. Модульные взаимодействия

Модуль выравнивания CSS Box расширяет и заменяет определения свойств выравнивания (justify-content, align-items, align-self, align-content), представленные здесь.

Там похожий язык в спецификации Grid. Вот пример:

§ 10.1. Желоба: The row-gap, column-gap, и gap свойство

row-gap и column-gap свойства (и их gap сокращенные), если это указаны на контейнере сетки, определяют желоба между сеткой строками и столбцами сетки. Их синтаксис определен в CSS Box Alignment 3 §8 Разрывы между ящиками.

Первоначальные свойства - grid-row-gap, grid-column-gap и grid-gap - длились недолго. Хотя, ради обратной совместимости, я уверен, что они все еще уважаются.

Ответ 2

flex-start учитывает наличие значений -reverse в направлении flex, а start - нет.

Например, в режиме письма слева направо с контейнером flex, установленным в flex-direction:row-reverse, justify-content:start приведет к justify-content:start всех элементов по левому flex-direction:row-reverse, тогда как 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>