Какая разница между flex-start и базовым уровнем?

При работе с свойствами гибкого выравнивания, какая разница между flex-start и baseline?

Ниже фрагмент кода дает тот же вывод для align-self: flex-start и align-self: baseline.

В каких случаях align-self: flex-start и align-self: baseline ведут себя по-другому?

.flex-container {
  color: white;
  display: -webkit-flex;
  display: flex;
  width: 350px;
  height: 200px;
  background-color: yellow;
}
.flex-item {
  background-color: green;
  width: 50px;
  min-height: 100px;
  margin: 10px;
}
.item1 {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.item2 {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}
.item3 {
  -webkit-align-self: center;
  align-self: center;
}
.item4 {
  -webkit-align-self: baseline;
  align-self: baseline;
}
.item5 {
  -webkit-align-self: stretch;
  align-self: stretch;
}

<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item5">stretch</div>
</div>

align-items: baseline

При использовании align-items или align-self значение flex-start будет выравнивать элементы гибкости на начальном фронте поперечной оси контейнера flex.

Значение baseline будет выравнивать элементы гибкости вдоль их содержимого базового уровня.

базовый

Линия, на которой большинство букв "сидят" и ниже которых расширяются ограничители.

^{Источник: Wikipedia.org}

Во многих случаях, когда размер шрифта одинаковый среди элементов (например, в вопросе), или содержимое в остальном одинаково, тогда flex-start и baseline будут неотличимы.

Но если размер контента варьируется между элементами flex, тогда baseline может иметь заметную разницу.

В терминах, где происходит выравнивание базовой линии, это определяется самым высоким элементом в строке.

Из спецификации:

8.3. Выравнивание по оси: align-items и align-selfСвойства

baseline

Элемент flex участвует в выравнивании базовой линии: все участвующие элементы гибкости на линии выравниваются таким образом, что их исходные линии выравниваются, а элемент с наибольшим расстоянием между его базовой линией и краем края кросс-начала размещается на одном уровне с кросс- начало края строки.

.flex-container { color: white; display: flex; height: 300px; background-color: yellow; justify-content: space-between; align-items: baseline; } .flex-item { background-color: green; width: 110px; min-height: 100px; margin: 10px; box-sizing: border-box; padding: 5px; text-align: center; } .item1 { font-size: 2em; } .item2 { font-size: 7em; } .item3 { font-size: .5em; } .item4 { font-size: 3em; } .item5 { font-size: 10em; } /* .item1 { align-self: flex-start; } .item2 { align-self: flex-end; } .item3 { align-self: center; } .item4 { align-self: baseline; } .item5 { align-self: stretch; } */ #dashed-line { border: 1px dashed red; position: absolute; width: 100%; top: 170px; }

<div class="flex-container"> <div class="flex-item item1">A</div> <div class="flex-item item2">B</div> <div class="flex-item item3">C</div> <div class="flex-item item4">D</div> <div class="flex-item item5">E</div> </div> <div id="dashed-line"></div>

Какая разница между flex-start и базовым уровнем?

Ответ 1

`align-items: flex-start`

`align-items: baseline`