11/32 Свойство align-self: baseline

Задание такое.
Задайте выравнивание флекс-элементов по базовой линии текста:

  1. для коврика Семёна .text-simeon ,
  2. для коврика Кекса .text-keks

Вопрос, почему Семен и Кексик будучи отцентрованы по центру перепрыгнули на верх при выравнивание флекс-элементов по базовой линии текста?
Почему не остались по центру где и были, а елементы не отцентровались относительно центру по нижней границе текста.

Код CSS
.room {
display: flex;
align-items: center;
}

.text-simeon {
align-self: baseline;
}
.text-keks {
align-self: baseline;
}

Потому что center и baseline - это два взаимоисключающих значения свойств align-self и align-items, устанавливающих расположение элемента относительно поперечной оси флекс-контейнера.

Align-self: baseline работает так:

  1. Если в строке флекс-элементов нет других элементов, расположенных в поперечном направлении по базовой линии, то расположение элемента будет таким же, как при align-self: flex-start.

  2. Если в строке флекс-элементов такие элементы есть и их шрифт больше, то текущий элемент выравнивается по их базовой линии.

  3. Если в строке флекс-элементов такие элементы есть и их шрифты меньше, то текущий элемент размещается в начале поперечной оси в рамках строки (=align-self: flex-start), а остальные элементы с выравниванием по базовой линии подгоняются под текущий.

3 лайка

Спасибо за разьяснение.