Выравнивание элементов по вертикальной оси — одна из главнейших болей всех верстальщиков. Сколько различных способов поставить элемент по центру вертикальной оси даже и не счесть. У всех способов есть свои преимущества и недостатки, но главное одно — никакой из них не является универсальным.
Приход флекс помог решить и эту проблему всего одним простым свойством. Это действительно отлично, потому что теперь нам не важны внешние факторы: знание размеров внешнего или внутреннего блока; количество строк текста; возможность его переноса; поддержка браузером. Всё это, ну кроме поддержки браузеров (я надеюсь вы не разрабатываете под IE7) в настоящее время можно не учитывать, используя простое правило align-items.
Для демонстрации работы правила возьмём codepen и добавим туда три блока разной высоты внутри флекс контейнера.
stretch. Данное значение применяется по умолчанию дочерним элементам внутри флекс контейнера. Оно говорит о том, что высоту необходимо выставить автоматически в зависимости от максимальной высоты блока в строке. Ранее, для достижения такого эффекта приходилось использовать JS. Блоки автоматически выставят высоту только при условии отсутствия другого значения высоты у блока в CSS. Если же один из блоков имеет своё значение высоты, то всё зависит от значения. Если оно меньше высоты самого высокого блока, то ничего, кроме изменения высоты одного блока не произойдёт. Если высота блока установлена больше, чем высота самого высокого блока, то все блоки автоматически пересчитают свою высоту.
flex-start. При использовании любых других значений высота элементов выставляется только такой, какая необходима блоку исходя из контента, padding и border. Меняется только расположение элементов. flex-start говорит элементам располагаться с начала флекс контейнера по перпендикулярной оси.
- center. Элементы внутри флекс контейнера располагаются по центру перпендикулярной оси.
- flex-end. Элементы внутри флекс контейнера располагаются от конца перпендикулярной оси
Последним значением является baseline. Если вы не знакомы со строением шрифтов, то по началу может показаться непонятным, по какой базовой линии идёт выравнивание. Базовая линия шрифта — воображаемая прямая линия, которая проводится по нижнему краю букв без учёта выносных элементов. Лучше всего это иллюстрирует следующая картинка:
Красным цветом выделена базовая линия шрифта. Именно по ней и будет производиться выравнивание. Браузер найдёт элемент с самым большим размером шрифта и выровняет все элементы по его базовой линии. Причём выравниваться будет также по базовым линиям текста в других блоках.
Самостоятельное задание
Создайте несколько блоков с текстами внутри флекс контейнера. Выставите выравнивание по базовой линии и попробуйте изменять длину текста, а также размер шрифта внутри блоков. Почувствуйте базовую линию шрифта и данное выравнивание.
