Флексы для начинающих
- 20 января 2023
Flexbox — инструмент построения крупных сеток и микросеток.
Чтобы превратить блок во флекс-контейнер, ему задают свойство display: flex
. Непосредственные потомки такого контейнера — флекс-элементы — становятся гибкими. Они легко сжимаются или растягиваются, меняют порядок, поддаются выравниванию по главной и поперечной осям.

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

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

Направлением главной оси можно управлять, меняя значения свойства flex-direction
:
flex-direction: row
— ось направлена слева направо, элементы располагаются в ряд. Это значение по умолчанию.flex-direction: row-reverse
— элементы идут в обратном направлении — справа налево.flex-direction: column
— элементы располагаются в столбец сверху вниз.flex-direction: column-reverse
— элементы идут снизу вверх.
Чаще всего используется значение по умолчанию — row
, чуть реже — column
. x-reverse
применяют редко.

Поперечная ось всегда находится под углом 90 градусов к главной. Если главная ось горизонтальна, поперечная идёт сверху вниз, а если главная вертикальна, то поперечная направлена слева направо.

justify-content
Флекс-элементами можно управлять, меняя их положение относительно каждой оси. CSS-свойство justify-content
распределяет элементы по главной оси. Оно принимает следующие значения:
flex-start
— элементы стоят в начале оси.flex-end
— элементы стоят в конце оси.center
— элементы по центру оси.space-between
— элементы равномерно распределены вдоль главной оси, при этом первый элемент располагается в начале, а последний — в конце. Между крайними элементами и флекс-контейнером отступа нет.space-around
— элементы равномерно распределены вдоль оси. Расстояние между крайними элементами и флекс-контейнером равно половине отступа между соседними флекс-элементами.space-evenly
— элементы равномерно размещены вдоль оси. Отступы между соседними элементами и краями флекс-контейнера равны.

align-items
За выравнивание элементов по поперечной оси отвечает свойство align-items
. По умолчанию у него значение stretch
, то есть элементы растягиваются вдоль всей оси.
Другие значения:
flex-start
— элементы идут в начале оси;flex-end
— элементы идут в конце оси;center
— элементы в центре оси;baseline
— элементы размещены по базовой линии.
Базовая линия — невидимая линия, которая проходит по нижней части букв.

Порой в макете отдельные элементы располагаются выше или ниже, правее или левее. На такие случаи во флексах есть свойство align-self
. Оно выравнивает отдельный элемент по поперечной оси.
Значения align-self
такие же, как у align-items.

align-content
Вдоль поперечной оси можно выравнивать не только элементы, но и ряды флекс-элементов — это делается с помощью свойства align-content
.
align-content
немного похож на свойства justify-content
и align-items
. От первого он взял значения:
flex-start
flex-end
center
space-between
space-around
space-evenly
От align-items
достались свойства: stretch
и baseline
.
С align-content
мы можем расположить ряды элементов более гибко — например, задав одинаковые расстояния между ними или растянув на всю возможную высоту.
Отличие align-content от align-items
align-items
выравнивает элементы внутри флекс-контейнера, а align-content
— ряды.
По умолчанию у align-content
значение stretch
— то есть ряды флекс-элементов растягиваются, и свободное пространство делится между ними пополам. В таких случаях отображение зависит от значения align-items
. Если это тоже stretch
, то элементы в строке растянутся на всю высоту. Если нет — элементы сожмутся до размеров содержимого и выровняются согласно значению align-items
.
Когда align-content
задано другое значение (не stretch
), оно перекрывает значения align-items
и align-self
. Например, здесь ряды элементов окажутся в конце поперечной оси:
div {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
align-items: flex-start;
}
flex-wrap
В коде выше есть свойство flex-wrap
— оно отвечает за перенос строк во флекс-контейнере. По умолчанию у свойства стоит значение no-wrap
, то есть перенос запрещён. При добавлении новых элементов все элементы станут сжиматься до минимально возможной ширины — даже если явно указано значение width
. Когда элементы перестанут помещаться в контейнере, то выйдут за его пределы.
Чтобы элементы при заполнении ряда переносились на новый, нужно указать flex-wrap: wrap
. Наглядный пример — гифка в начале статьи.

Ещё без переноса рядов не работает свойство align-content
. Например, в таком случае элементы выровняются по началу поперечной оси.
div {
display: flex;
align-content: flex-end;
align-items: flex-start;
}
Игры и курсы для практики
Флексы — очень гибкий инструмент, с его помощью можно создавать сложные микросетки и даже менять элементы местами. Основу теории вы теперь знаете — дальше дело за закреплением материала и углублением знаний.
Где практиковаться и что изучить:
- Flexbox froggy — игра на русском языке, где вы с помощью флексов размещаете лягушат на кувшинках.
- Flexbox Defense — англоязычная игра в стиле Tower Defense. Вы на флексах располагаете башни, чтобы защититься от врагов.
- Курс «HTML и CSS. Профессиональная вёрстка сайтов». Научитесь верстать сайты и писать для них стили. Изучите не только флексы, но и гриды — ещё один современный механизм построения сеток.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Как работает :not() в CSS — исключаем элементы из стилей правильно
Доступно в Baseline в статусе «Widely Available» с 2023-07-21
Псевдокласс :not()
позволяет задать стили для всех элементов, кроме тех, что соответствуют определённому селектору. Это мощный инструмент, который делает CSS гибче, чище и избавляет от необходимости писать сложные конструкции или добавлять лишние классы в HTML.
- 20 июля 2025

Выбор цветов в CSS через hsl() и hsla()
CSS-функции hsl()
и hsla()
позволяют задавать цвета на основе восприятия человеком, а не машинной модели RGB. Это делает работу с цветами более гибкой и наглядной, особенно при создании адаптивных интерфейсов, тёмных тем или анимаций.
- 18 июля 2025

Как перекрыть один элемент другим. CSS-свойство z-index
Свойство z-index
в CSS отвечает за порядок наложения элементов на веб-странице. Оно определяет, какой элемент окажется сверху, а какой — будет скрыт под ним. Чем выше значение z-index
, тем ближе к пользователю расположен элемент.
- 16 июля 2025

Единица измерения cap в CSS
С 11 декабря 2023 года (Baseline: Newly Available) в CSS появилась новая единица измерения — cap
. Она измеряет высоту заглавной латинской буквы в шрифте, установленном для элемента. Это значит, что теперь можно задавать размеры, отступы и позиционирование элементов не только в пикселях, em
или rem
, но и относительно визуальной высоты заглавных букв.
Эта единица особенно полезна при работе с крупными заголовками, адаптивной типографикой и точным выравниванием текста.
- 8 июля 2025

10 свойств в CSS о которых вы, вероятно, не знали
Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <margin>
, <color>
, <font-size>
и может быть, <flex>
. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.
- 22 июня 2025

Округление в CSS с функцией round()
Функция round()
появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc()
или JavaScript.
- 22 июня 2025

focus-visible
Когда мы создаём сайты, мы хотим, чтобы ими было удобно пользоваться всем людям — и тем, кто управляет страницей с помощью мыши, и тем, кто использует клавиатуру. Например, человек с ограниченными возможностями зрения может перемещаться по элементам с помощью клавиши Tab
.
Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.
Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули.
Тут и помогает :focus-visible
. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.
- 21 июня 2025

CSS font-palette: управление цветами шрифтов
Свойство font-palette
позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color
уже не влияет.
В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.
Альтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)
Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.
- 18 июня 2025

Как анимировать CSS Grids без JavaScript
Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float
, flex
и position
. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.
Да, grid-template-columns
и grid-template-rows
существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.
Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns
и grid-template-rows
вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents
. Просто работает.
- 1 июня 2025

Все единицы измерения в CSS от лучших к худшим
CSS использует разные единицы измерения для задания размеров, отступов, шрифтов и других свойств. Разделяют абсолютные и относительные единицы. Понимание различий между ними — фундаментальная основа адаптивной, масштабируемой и удобной в поддержке вёрстки.
Абсолютные:
px
— пикселиcm
— сантиметрыmm
— миллиметрыin
— дюймыpt
— типографские пунктыpc
— пика
Относительные:
z%
— процент от родителяem
— от размера шрифта родителяrem
— от размера шрифта корняvw
— 1% от ширины вьюпортаvh
— 1% от высоты вьюпортаvmin
/vmax
— минимальное/максимальное из vw и vhfr
— доля пространства в грид-сеткеch
— ширина символа «0»ex
— высота строчной буквы «x»
Примеры ниже снабжены пояснениями из практики, с фокусом на применение в реальных проектах.
- 30 мая 2025