Выравнивание элементов по поперечной оси — CSS: Основы Flex

• align-items: stretch
• align-items: flex-start
• align-items: center
• align-items: flex-end
• align-items: baseline
  • Самостоятельное задание
  • Документация

Выравнивание элементов по поперечной оси — одна из главнейших болей всех верстальщиков. Сколько различных способов поставить элемент по центру поперечной оси — даже и не счесть. У всех способов есть свои преимущества и недостатки, но главное одно — никакой из них не является универсальным.

Приход Flex помог решить и эту проблему всего одним простым свойством. Это действительно отлично, потому что теперь нам не важны внешние факторы: знание размеров внешнего или внутреннего блока; количество строк текста; возможность его переноса; поддержка браузером. Все это, кроме поддержки браузеров (я надеюсь, вы не разрабатываете под IE7), можно не учитывать, используя простое правило align-items.

Для демонстрации работы правила возьмем CodePen и добавим туда три блока с разным размером шрифта:

https://codepen.io/hexlet/pen/ZEEzJqX

align-items: stretch

Значение применяется по умолчанию к дочерним элементам внутри флекс-контейнера. Оно говорит, что высоту необходимо выставить автоматически в зависимости от высоты Flex-контейнера.

Ранее для достижения такого эффекта приходилось использовать JS. Блоки автоматически выставят высоту только при условии отсутствия другого значения высоты у блока в CSS.

Если один из блоков имеет свое значение высоты, то все зависит от этого значения:

• Если оно меньше высоты самого высокого блока, то ничего не произойдет, кроме изменения высоты одного блока
• Если значение больше, чем высота самого высокого блока, то все блоки автоматически пересчитают свою высоту, так как увеличится высота контейнера

При использовании любых других значений высота элементов выставляется только такой, какая необходима блоку исходя из контента, свойств padding и border. Меняется только расположение элементов.

align-items: flex-start

Элементы располагаются с начала флекс-контейнера по поперечной оси.

https://codepen.io/hexlet/pen/yLLBzMj

align-items: center

Элементы внутри флекс-контейнера располагаются по центру поперечной оси.

https://codepen.io/hexlet/pen/XWWreRy

align-items: flex-end

Элементы внутри флекс-контейнера располагаются от конца поперечной оси

https://codepen.io/hexlet/pen/GRRKMvj

align-items: baseline

Если вы не знакомы со строением шрифтов, то сначала может показаться непонятным, по какой базовой линии идет выравнивание. Базовая линия шрифта — воображаемая прямая линия, которая проводится по нижнему краю букв без учета выносных элементов. Лучше всего это иллюстрирует следующая картинка:

Красным цветом выделена базовая линия шрифта. Именно по ней и будет производиться выравнивание. Браузер найдет элемент с самым большим размером шрифта и выровняет все элементы по его базовой линии. Причем другие блоки также будут выровнены по базовым линиям текста внутри них.

https://codepen.io/hexlet/pen/YzzKrry

Самостоятельное задание

Создайте несколько блоков с текстами внутри флекс-контейнера. Выставьте выравнивание по базовой линии и попробуйте изменять длину текста, а также размер шрифта внутри блоков. Почувствуйте базовую линию шрифта и данное выравнивание.

Документация

• align-items