CSS Academy · Урок

Перенос Flex и Align-Content

Разрешайте перенос элементов flex на несколько строк и выравнивайте перенесённые строки с помощью align-content.

«Перенос Flex и Align-Content» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

flex-wrap: nowrap (по умолчанию)

По умолчанию флекс-элементы не переносятся. Если элементы не помещаются по ширине контейнера, они сжимаются или выходят за его пределы, а не переносятся на новую строку.

flex-wrap: wrap

При использовании flex-wrap: wrap элементы, выходящие за пределы главной оси, переносятся на новую строку (или в новый столбец при направлении column). Каждая строка переноса ведёт себя как отдельный мини-флекс-контейнер.

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse переносит элементы в противоположном направлении поперечной оси: новые строки появляются сверху (при направлении row), а не снизу.

Шаблон переноса карточек

Классическая адаптивная раскладка карточек, в которой карточки переносятся на следующую строку при уменьшении области просмотра:

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

align-content для нескольких строк

align-content управляет промежутками между перенесёнными строками на поперечной оси. Если строка всего одна, свойство не действует. Значения соответствуют значениям justify-content.

Значения align-content

Доступные значения:

flex-start — группировать строки у начала поперечной оси
flex-end — группировать строки у конца поперечной оси
center — выравнивать строки по центру
space-between — создавать одинаковые промежутки между строками
space-around — создавать одинаковое пространство вокруг строк
stretch — растягивать строки, чтобы заполнить контейнер (по умолчанию)

<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items и align-content

Разница:

align-items — выравнивает элементы внутри каждой строки флекс-контейнера
align-content — выравнивает сами строки флекс-контейнера внутри контейнера

Промежутки во флексбоксе

Свойство gap (ранее grid-gap) добавляет одинаковые промежутки между флекс-элементами без использования внешних отступов. Оно работает и для промежутков между строками, и для промежутков между столбцами.

<div class="flex-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Адаптивный перенос без медиазапросов

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

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

Сокращённая запись flex-flow

flex-flow объединяет flex-direction и flex-wrap в одном объявлении:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Перенос и сетка

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

Быстрая проверка

Какое свойство выравнивает сами строки переноса, если у флекс-контейнера несколько строк?

Итоги

flex-wrap: wrap позволяет элементам переходить на новые строки. align-content управляет промежутками между этими строками в многострочном контейнере. Используйте gap для создания одинаковых промежутков. Объедините flex: 1 1 250px с flex-wrap, чтобы создать адаптивные сетки карточек без медиазапросов.

Часто задаваемые вопросы

Урок «Перенос Flex и Align-Content» бесплатный?

Да — полный текст урока «Перенос Flex и Align-Content» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Перенос Flex и Align-Content»?

Разрешайте перенос элементов flex на несколько строк и выравнивайте перенесённые строки с помощью align-content. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Перенос Flex и Align-Content»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy