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

Курсы §35. Флексбокс, часть 1
1

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

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

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

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

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

%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9
Безымянный.png2390×768 448 KB

2

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

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

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

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

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

3 лайка
3

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