Flexbox: выстраиваем в ряд и в столбец

Flexbox — раскладка CSS, которая выстраивает дочерние элементы в ряд или в столбец и распределяет место по главной и поперечной осям.

Новая эпоха, новая раскладка

Вы дошли до 2014 года. Большая часть сайтов открывается на телефонах, ширина экранов самая разная, а float как инструмент раскладки уже надоел всем. Тогда в браузерах появляется flexbox (Flexible Box Layout, «гибкие блоки»). Первые черновики спецификации относятся к 2009 году, а окончательный вид, с которым вы сейчас будете работать, закрепился около 2012–2014 годов, и массово им стали пользоваться, когда его поддержали все основные браузеры. Для нашей практики это значит: никаких таблиц и плавающих блоков, ряды и столбцы выстраивают сами.

Контейнер и элементы

Flexbox работает так: вы объявляете родителя flex-контейнером, и его дети становятся flex-элементами, которые выстраиваются в ряд или в столбец.

.menu {
  display: flex;
  gap: 1rem;
}

Две строки, и пункты меню стоят в ряд с промежутком. Теперь два понятия, на которых держится всё остальное:

• главная ось: направление, в котором идут элементы. По умолчанию слева направо (flex-direction: row). Если сказать column, то сверху вниз;
• поперечная ось перпендикулярна главной.

И два свойства для двух осей: justify-content распределяет элементы по главной оси, а align-items выравнивает по поперечной. Когда меняется направление, оси меняются местами, и вместе с ними меняют работу свойства. Это единственное, что здесь путают. Поиграйте на схеме: смените направление и посмотрите.

.menu {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

Свойства контейнера

• display: flex это включает flexbox;
• flex-direction: row | column (и -reverse) это куда идут элементы;
• flex-wrap: wrap это разрешает переносить элементы на следующую строку. Без него всё стоит в одну линию и, если места не хватает, сжимается или вылезает за край;
• justify-content: flex-start | center | flex-end | space-between | space-around это распределение по главной оси;
• align-items: stretch | flex-start | center | flex-end это выравнивание по поперечной оси; stretch (по умолчанию) растягивает элементы на всю высоту ряда, поэтому карточки одной строки одинаковой высоты;
• gap: 1rem это расстояние между элементами. Раньше его делали внешними отступами и боролись с лишним отступом у последнего. Для flexbox gap работает во всех современных браузерах с 2021 года.

Свойства элементов

Главное свойство элемента: flex, сокращение из трёх чисел:

.card {
  flex: 1 1 14rem;
}

Это flex-grow (может ли расти и занимать свободное место), flex-shrink (может ли сжиматься) и flex-basis (желаемый размер до роста и сжатия). Запись flex: 1 1 14rem читается так: «я хочу ширину 14rem, но могу вырасти, чтобы заполнить ряд, и могу сжаться». Из этого получаются карточки, которые сами переносятся на следующую строку: четыре в ряд на широком экране, одна на телефоне. Без единой строки про экран.

Есть ещё align-self (выровнять один элемент иначе) и order (поменять порядок). Со вторым осторожнее: меняется только вид, а порядок с клавиатуры и в программе чтения остаётся прежним. Глаза и диктор разойдутся. Лучше менять порядок самих элементов в HTML.

Из готовых приёмов запомните три:

• шапка: название слева, меню справа: justify-content: space-between;
• центрирование блока по обеим осям (задача, которая раньше считалась дурацкой): justify-content: center; align-items: center;
• «прижать» один элемент вправо: margin-left: auto.

Практика

Новая эпоха, новая страница: в 2014 году ваш сайт заново собран, но без оформления. Ваш styles.css уже содержит базу, как в 2014-м писали «reset»: размеры, шрифты, цвета. Ваша работа раскладка.

Поскольку каждая эпоха собирается заново, файл стилей нужно подключить. Это та же строка, что в 2005-м. Потом вы выстраиваете шапку, меню, основное с боковым и карточки на flexbox. Попробуйте проверить результат сами: потяните границу окна браузера и убедитесь, что меню и карточки переносятся, а не вылезают за край.

Что было не так с 2014 годом

Новая раскладка была хороша, но её по-прежнему писали «настольными» размерами: ширины в пикселях, картинки без запасного размера. В следующих уроках вы доведёте её до адаптивной. Был и другой подвох: у первого flexbox было два разных синтаксиса, а Internet Explorer 10 понимал третий, и авторы писали все варианты подряд. Эта мода ушла вместе с теми браузерами.