Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Выравнивание элементов по перпендикулярной оси CSS: Основы Flex

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

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

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

  • stretch. Данное значение применяется по умолчанию к дочерним элементам внутри флекс-контейнера. Оно говорит о том, что высоту необходимо выставить автоматически в зависимости от максимальной высоты блока в строке. Ранее для достижения такого эффекта приходилось использовать JS. Блоки автоматически выставят высоту только при условии отсутствия другого значения высоты у блока в CSS. Если же один из блоков имеет своё значение высоты, то всё зависит от этого значения. Если оно меньше высоты самого высокого блока, то ничего, кроме изменения высоты одного блока не произойдёт. Если значение больше, чем высота самого высокого блока, то все блоки автоматически пересчитают свою высоту.

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

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

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

Базовая линия шрифта

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

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

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

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


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»