Как создать сетку на странице. CSS-свойство flex

18 мая 2023

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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Синтаксис

ul {
  display: flex;
  flex-direction: row;
}

Значения свойства flex

flex-grow
flex-shrink
flex-basis
flex-direction
flex-wrap
justify-content
align-items
align-self
order

Разберём значения на примерах.

Flex-grow

Значение flex-grow определяет, как элементы будут растягиваться внутри контейнера, когда есть свободное пространство. flex-grow может принимать целые или дробные числовые значения и по умолчанию равно 0. Если задать flex-grow значение больше нуля, то флекс-элемент растянется на всё оставшееся во флекс-контейнере свободное пространство.

.container {
  display: flex;
}

.item-puppy {
  flex-grow: 0;
}

.item-cat {
  flex-grow: 1;
}

Второй элемент занимает всё свободное пространство контейнера, так как flex-grow равно 1

Если флекс-элементам задать одинаковые положительные значения flex-grow, то они поровну поделят между собой свободное пространство.

.container {
  display: flex;
}

.item-puppy {
  flex-grow: 1;
}

.item-cat {
  flex-grow: 1;
}

У обоих элементов flex-grow равен 1, поэтому они делят всё свободное пространство пополам

Flex-shrink

Значение flex-shrink отвечает за гибкость и сжатие элементов, когда доступное пространство ограничено. Принимает числовое значение, которое указывает, какую долю свободного пространства элемент займёт при сжатии относительно других элементов в контейнере. По умолчанию равно 1.

Все флекс-элементы по умолчанию могут сжиматься, если после определения размеров выяснилось, что места во флекс-контейнере не хватает. Если один элемент имеет flex-shrink: 2, а другие — flex-shrink: 1, первый элемент будет сжиматься в два раза больше остальных. В целом значение flex-shrink используется достаточно редко. Если в микросетке большое количество элементов, то обычно сразу включают многострочный флекс-контейнер, чтобы элементы не деформировались.

.container {
  display: flex;
}

.item-puppy {
  flex-shrink: 2;
}

.item-cat {
  flex-shrink: 1;
}

.item-corgi {
  flex-shrink: 1;
}

У первого элемента значение flex-shrink равно 2, поэтому он сжимается большее остальных элементов

Flex-basis

Свойство flex-basis задает начальный размер элемента перед распределением доступного пространства. Можно указать значение в px, mm или в процентах вдоль главной оси. Значение по умолчанию — auto.

Свойство flex-basis сильнее width и height, оно их переопределит, если встретится с ними на одном и том же флекс-элементе.

.container {
  display: flex;
}

.item-puppy {
  height: 220px;
  width: 220px;
  flex-basis: 300px;
}

.item-cat {
  height: 220px;
  width: 220px;
}

.item-corgi {
  height: 220px;
  width: 220px;
}

У первого элемента свойство flex-basis переопределяет размеры и элемент становится шире

Flex-direction

Свойство flex-direction определяет направление элементов в контейнере — горизонтальное или вертикальное, что дает большую гибкость в создании различных макетов.

Можно указать одно из четырех значений:

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

.container { 
  display: flex; 
  flex-direction: row;
}

Элементы располагаются горизонтально по порядку, определённому в разметке

row-reverse указывает, что элементы располагаются в контейнере горизонтально, но в обратном порядке. Первый элемент становится последним, а последний элемент — первым.

css .container { display: flex; flex-direction: row-reverse; }

Элементы располагаются горизонтально в обратном порядке

column указывает, что элементы располагаются вертикально в контейнере. Каждый элемент занимает отдельную строку внутри контейнера.

css .container { display: flex; flex-direction: column; }

Элементы располагаются вертикально по порядку в разметке

column-reverse указывает, что элементы располагаются в контейнере вертикально, но в обратном порядке. Первый элемент перемещается на последнее место, а последний — на первое.

.container {
  display: flex;
  flex-direction: column-reverse;
}

Первый по разметке элемент располагается на последнем месте и элементы перестраиваются

Flex-wrap

Свойство flex-wrap определяет, должны ли элементы переноситься на новую строку или оставаться на одной. Имеет три значения — nowrap, wrap, wrap-reverse.

nowrap — значение по умолчанию, указывает, что элементы располагаются в контейнере в одну строку или столбец. Если элементы не помещаются по ширине или высоте контейнера, они будут масштабироваться.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.blue {
  height: 220px;
  width: 220px;
  background: #4b9eb3;
}
  
.item-puppy {
  height: 220px;
  width: 220px;
  background-image: url(./images/puppy.jpg);  
}

.pink {
  height: 220px;
  width: 220px;
  background: #e78830;
}
  
.item-cat {
  height: 220px;
  width: 220px;
  background-image: url(./images/cat.jpg);
}

Все элементы располагаются на одной строке

wrap — элементы могут переноситься на следующую строку или столбец, если они не помещаются. Это позволяет создавать многострочные или многоколоночные макеты. Элементы будут размещены в новых строках или столбцах сверху вниз или слева направо, в зависимости от ориентации основной оси.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.blue {
  height: 220px;
  width: 220px;
  background: #4b9eb3;
}
  
.item-puppy {
  height: 220px;
  width: 220px;
  background-image: url(./images/puppy.jpg);  
}

.pink {
  height: 220px;
  width: 220px;
  background: #e78830;
}
  
.item-cat {
  height: 220px;
  width: 220px;
  background-image: url(./images/cat.jpg);
}
  
.green {
  height: 220px;
  width: 220px;
  background: #4bb381;
}

.item-corgi {
  height: 220px;
  width: 220px;
  background-image: url(./images/corgi.jpg); 
 }

Элементы переносятся на следующую строку, если не помещаются

wrap-reverse — значение работает аналогично wrap, но элементы будут переноситься на следующую строку или столбец в обратном порядке. Например, если в flex-direction указано row, элементы будут переноситься на новую строку справа налево.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

.blue {
  height: 220px;
  width: 220px;
  background: #4b9eb3;
}
  
.item-puppy {
  height: 220px;
  width: 220px;
  background-image: url(./images/puppy.jpg);  
}

.pink {
  height: 220px;
  width: 220px;
  background: #e78830;
}
  
.item-cat {
  height: 220px;
  width: 220px;
  background-image: url(./images/cat.jpg);
}
  
.green {
  height: 220px;
  width: 220px;
  background: #4bb381;
}

.item-corgi {
  height: 220px;
  width: 220px;
  background-image: url(./images/corgi.jpg); 
}

Элементы переносятся на следующую строку в обратном порядке

Justify-content

Свойство justify-content распределяет элементы вдоль главной оси контейнера.

У свойства есть ряд значений:

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

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

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

flex-end указывает, что флекс-элементы выровнены по концу главной оси контейнера. Если основная ось направлена горизонтально, то элементы будут выравниваться справа, а если ось направлена вертикально — снизу.

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

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

center указывает, что флекс-элементы выровнены по центру главной оси контейнера. Элементы будут выравниваться горизонтально или вертикально в центре контейнера.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

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

space-between указывает, что флекс-элементы равномерно распределены вдоль главной оси контейнера. Первый элемент будет выровнен в начале оси, а последний элемент — в конце. Промежутки между элементами будут распределены равномерно.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

Элементы располагаются равномерно вдоль главной оси контейнера

space-around означает, что флекс-элементы равномерно распределены вдоль главной оси контейнера с равными промежутками как до, так и после каждого элемента.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

space-evenly указывает, что элементы равномерно распределены вдоль главной оси контейнера, и промежутки между ними и на краях контейнера равны.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

Элементы равномерно распределены, промежутки между ними и на краях контейнера равны

Align-items

Свойство align-items определяет выравнивание элементов вдоль поперечной оси контейнера.

align-items имеет несколько значений:

flex-start — флекс-элементы выровнены по началу поперечной оси контейнера. Если поперечная ось направлена горизонтально, то элементы будут выравниваться вверху, а если ось направлена вертикально, то элементы будут выравниваться слева.

.container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

Поперечная линия направлена вертикально, элементы выравнивается слева

flex-end — флекс-элементы выровнены по концу поперечной оси контейнера.

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

center — флекс-элементы выровнены по центру поперечной оси контейнера. Элементы будут выравниваться горизонтально или вертикально в центре контейнера.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

baseline — флекс-элементы выровнены по базовой линии, которая обычно используется для выравнивания текста.

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

Align-self

Свойство align-self определяет выравнивание отдельного элемента вдоль поперечной оси контейнера. Это свойство задаётся флекс-элементу, а не флекс-контейнеру, и имеет такие же значения, как свойство align-items.

.container {
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

.item-puppy {
  height: 220px;
  width: 220px;
  background-image: url(./images/puppy.jpg);  
  align-self: center;
}

Все элементы в контейнере выравниваются по базовой линии, но элемент с классом .puppy выравнивается по центру контейнера — Все элементы в контейнере выравниваются по базовой линии, но элемент с классом.puppy выравнивается по центру контейнера

Order

Значение order определяет порядок отображения элементов в контейнере, задаётся нужному флекс-элементу. Числовое значение определяет порядковый номер элемента, и чем меньше число, тем ближе элемент будет располагаться к началу контейнера.

.container {
  display: flex;
}

.item:first-child {
  order: 2;
}

.item:last-child {
  order: 1;
}

Первый элемент с классом .item будет отображаться после последнего элемента в контейнере — Первый элемент с классом.item будет отображаться после последнего элемента в контейнере

Нюансы использования

Свойство flex работает только для элементов, у которых значение свойства display установлено на flex.
Если элементы не помещаются в одну строку или колонку из-за ограничений ширины или высоты контейнера, используется свойство flex-wrap со значением wrap, чтобы элементы переносились на новую строку или колонку.
Расположение элементов в HTML-файле не имеет решающего значения. Порядок элементов можно поменять в CSS.
Если нужно задать порядок отображения элементов, можно использовать свойство order, где меньшее значение будет помещать элемент ближе к началу контейнера.
Множество языков в мире используют написание справа налево rtl (right-to-left), в отличие от привычного ltr (left-to-right). Флекс адаптирован для этого. В нем есть понятие начала и конца, поэтому в браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке.

📌 Актуальная информация о поддержке браузерами свойства flex на caniuse.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Телеграм Подкаст Бесплатные учебники

Как размыть фон под элементом с помощью backrop-filter

В сентябре 2024 в Baseline в статусе Widely-available вошло CSS-свойство backdrop-filter. Оно делает красивое: позволяет применить фильтры (размытие, контраст, яркость, и прочее) к фону за элементом. Не к самому элементу, а именно к тому, что за ним — это важно.

То есть если у вас есть модальное с полупрозрачным фоном, вы можете сделать так, чтобы то, что под ней, красиво размывалось, как в macOS или на айфоне. Это и есть главное применение backdrop-filter.

Пример минимального кода:

<div class="glass-panel">Контент</div>

.glass-panel {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.3);
}

Чтобы это работало, у элемента должен быть фон с прозрачностью (например, rgba или hsla), иначе фильтр не виден. И да, backdrop-filter визуально различим только если элемент реально перекрывает что-то.

CSS

5 мая 2025

$Справочник по новым математическим функциям CSS$

Справочник по новым математическим функциям CSS

За последние годы в CSS добавилось много математических функций, для которых не нужен JavaScript. Их можно использовать в анимациях, в графиках для визуализации данных или просто для создания красивых пользовательских интерфейсов.

Эта статья — справочник, который вы можете добавить в закладки и обращаться по мере необходимости. А подробно ознакомиться с работой математических функций можно в интерактивной демонстрации в HTML Academy.

Статья дополняется.

CSS

28 апреля 2025

CSS Scroll-Driven Animations: что это, зачем нужно и как начать пользоваться

Раньше, чтобы анимировать что-то при прокрутке, приходилось писать JavaScript. Слушать события scroll, вычислять позиции элементов, руками задавать стили. Это было сложно и работало неэффективно. Но в 2025 в CSS появилась нормальная нативная поддержка скролл-анимаций.

Частичная поддержка есть в Chrome 115+, Edge 115+ и Opera 117+, с флагами — в Firefox 110+. Ждём ещё Safari.

Внимание! Все примеры в этой статье работают только в Chrome 116+.

CSS

27 апреля 2025

Анимация по любой траектории с offset-path

У вас же было такое, что ждёте курьера или доставку, а их всё нет и нет? Заходите сайт, обновляете статус, а там «В пути» и больше никакой информации. У нас вот было много раз.

В хороших случаях курьера рисуют прямо на карте, и показывают, где он едет, где проехал, и прямо анимацией можно всё рассмотреть.

CSS

18 апреля 2025

Автоматическая тёмная тема: новая CSS-функция light-dark()

CSS-функция light-dark() облегчает жизнь при поддержке светлой и тёмной темы. Раньше, чтобы задать разные стили для разных тем, приходилось писать медиа-выражения вроде @media (prefers-color-scheme: dark) и дублировать одни и те же куски стилей с поправками на цвет. Это работало, но выглядело избыточно и громоздко, особенно когда надо было поменять всего один цвет. Для системности создавались CSS-переменные — например, --text-color, значение которой менялось внутри медиавыражения. Всё это работало, но напоминало церемонию ради церемонии.

С light-dark() всё стало проще. Это функция, которая на лету подставляет значение в зависимости от активной темы. Если у пользователя включена светлая тема, функция вернёт первое значение. Если тёмная — второе. Пример: color: light-dark(black, white) — в светлой теме будет чёрный текст, в тёмной — белый. Всё. Никаких переменных, никаких @media. Просто одно свойство и два значения — читаемо, логично, компактно.

CSS

23 апреля 2024

Псевдокласс :link

Псевдокласс :link в CSS предназначен для стилизации ссылок, которые ещё не были посещены пользователем. Этот псевдокласс позволяет разработчикам задавать внешний вид для непосещенных ссылок отдельно от тех, по которым пользователь уже переходил, что помогает лучше ориентироваться на странице и повышает удобство использования сайта.

Пример использования псевдокласса :link для стилизации непосещенных ссылок:

a:link {
  color: #007bff;
  text-decoration: none;
}

В данном примере для всех непосещенных ссылок устанавливается синий цвет (#007bff) и убирается подчеркивание. Это делает внешний вид ссылок более аккуратным и одновременно информативным, поскольку пользователь может легко отличить их от уже посещенных (:visited) ссылок.

При работе с :link, важно помнить, что этот псевдокласс должен использоваться в сочетании с псевдоклассом :visited для полной стилизации состояний ссылок. Также рекомендуется определять стили для псевдоклассов :hover и :active, чтобы обеспечить интерактивный и отзывчивый интерфейс.

Пример полного набора стилей для ссылок:

a:link {
  color: #007bff;
  text-decoration: none;
}

a:visited {
  color: #666;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:active {
  color: #ff0000;
}

В этом примере задаются различные стили для всех возможных состояний ссылок: :link для непосещённых, :visited для посещённых, :hover при наведении курсора и :active в момент нажатия на ссылку. Такой подход позволяет создать более динамичный и интуитивно понятный интерфейс веб-страницы.

CSS

4 апреля 2024

Селектор потомков (пробел)

Селектор потомков в CSS используется для выбора элементов, которые являются потомками другого элемента в структуре документа. Этот селектор обозначается простым пробелом между двумя селекторами и позволяет применить стили к элементам, находящимся внутри других элементов, независимо от глубины их вложенности.

Пример использования селектора потомков:

article p {
  color: #333;
  line-height: 1.6;
}

В данном примере все абзацы (<p>), которые находятся внутри элемента <article>, будут окрашены в темно-серый цвет и получат межстрочный интервал в полтора размера шрифта. Селектор потомков позволяет легко управлять стилем конкретных элементов, сохраняя при этом общую структуру и читаемость кода.

Селектор потомков особенно полезен в следующих случаях:

Структурирование контента: Помогает стилизовать элементы внутри определенных секций или компонентов, не затрагивая похожие элементы в других частях страницы.
Тематическое оформление: Используется для применения уникальных стилей к элементам, расположенным внутри определенных контейнеров, например, для статей, сайдбаров или футеров.
Изоляция стилей: Обеспечивает локальное применение стилей, предотвращая их случайное распространение на другие элементы документа.

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

Однако, важно соблюдать баланс и избегать слишком глубокой вложенности селекторов, так как это может усложнить поддержку и оптимизацию кода. Рекомендуется использовать селектор потомков с умом, ориентируясь на поддержание чистоты и простоты структуры CSS.

CSS

4 апреля 2024

Псевдокласс :focus

Псевдокласс :focus в CSS используется для стилизации элементов, которые получили фокус. Это может быть, например, текстовое поле в форме, к которому пользователь переместил курсор для ввода, или ссылка, выбранная через клавиатурный ввод. Псевдокласс :focus позволяет создать более интерактивный и доступный пользовательский интерфейс, подсвечивая активные или выбранные элементы.

Пример использования :focus:

input:focus {
  border: 2px solid blue;
  background-color: lightblue;
}

В этом примере для всех текстовых полей (input) при получении фокуса будет изменяться цвет границы на синий и фоновый цвет на светло-синий. Это обеспечивает наглядную обратную связь пользователю о том, какой элемент формы активен в данный момент, улучшая общую пользовательскую доступность и удобство использования интерфейса.

Псевдокласс :focus особенно важен для:

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

Применение :focus в сочетании с другими псевдоклассами, такими как :hover и :active, позволяет создать комплексное визуальное представление различных состояний элементов управления, делая интерфейс более интуитивно понятным и приятным в использовании.

Однако, важно помнить, что стилизация элементов при помощи :focus должна быть достаточно заметной, чтобы пользователь мог легко идентифицировать фокусируемый элемент, но при этом не должна быть слишком навязчивой, чтобы не отвлекать от общего восприятия интерфейса.

CSS

4 апреля 2024

Селектор по id

CSS-селектор по идентификатору (id) позволяет стилизовать элементы веб-страницы, которые имеют уникальный идентификатор. Использование селектора по id делает возможным точечное применение стилей к конкретному элементу, не затрагивая другие элементы на странице.

Селектор по id обозначается знаком решетки (#) перед именем идентификатора. Идентификаторы в HTML должны быть уникальными в пределах документа, что делает селектор по id мощным инструментом для стилизации конкретных элементов.

Пример использования селектора по id:

<div id="uniqueElement">Этот элемент уникален.</div>

#uniqueElement {
  color: green;
  font-size: 20px;
}

В этом примере элементу <div> с id="uniqueElement" присваиваются стили, делающие текст зеленым и увеличивающие размер шрифта до 20 пикселей. Эти стили будут применены только к этому конкретному элементу благодаря уникальности идентификатора.

Преимущества использования селектора по id:

Точечная стилизация: Селектор по id позволяет применять стили к конкретному элементу, не влияя на другие элементы.
Высокий приоритет: Стили, примененные через селектор по id, имеют более высокий приоритет, чем стили, примененные через классы и теги, что облегчает переопределение стилей.

Важно помнить:

Идентификатор должен быть уникальным в пределах всего HTML-документа.
Злоупотребление селекторами по id может сделать CSS-код сложным для поддержки, особенно в больших проектах. Рекомендуется использовать их с умом, предпочитая классы для стилизации, когда это возможно.
Селекторы по id могут увеличить специфичность CSS-правил, что иногда затрудняет их переопределение.

Использование селектора по id является мощным инструментом в арсенале веб-разработчика, позволяя точечно влиять на стиль отдельных элементов страницы.

CSS

4 апреля 2024

Несколько селекторов через запятую

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

Пример использования списка селекторов для стилизации заголовков, абзацев и элементов списка:

h1, h2, p, li {
  color: #333;
  font-family: 'Arial', sans-serif;
}

В этом примере все заголовки первого и второго уровней, абзацы и элементы списка (<li>) окрашиваются в темно-серый цвет (#333) и стилизуются шрифтом Arial. Использование списка селекторов позволяет значительно сократить количество кода, необходимого для применения общих стилей к разным элементам.

Применение списка селекторов эффективно во многих ситуациях, включая:

Применение базовых стилей текста (цвет, шрифт, размер) к различным типам элементов.
Сброс стандартных отступов для элементов списка, параграфов и других блочных элементов.
Установка общих стилей для интерактивных элементов, таких как кнопки и ссылки, в различных частях веб-страницы.

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

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

CSS

4 апреля 2024

Как создать сетку на странице. CSS-свойство flex

Синтаксис

Значения свойства flex

Flex-grow

Flex-shrink

Flex-basis

Flex-direction

Flex-wrap

Justify-content

Align-items

Align-self

Order

Нюансы использования

Материалы по теме

Читать дальше

Вход

Регистрация

Восстановление доступа

Запишитесь на консультацию