flex-wrap: перенос строк

Перенос детей на новые строки при нехватке ширины.

Уровень: начальный 10 разделов 10 минут

1. Что это и зачем

Перенос детей на новые строки при нехватке ширины.

Flexbox выстраивает элементы вдоль одной оси: главная определяет направление, поперечная — выравнивание. Контейнер распределяет свободное место через flex-grow и flex-shrink, а выравнивает элементы через justify-content и align-items.

{title} — основной инструмент для строк: панели, меню, кнопки выровнены за минуту.

2. Синтаксис и пример

.gallery { display: flex; flex-wrap: wrap; }

Запись выше — базовый вариант использования. Обратите внимание, как flex-wrap: перенос строк вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Гибкие контейнеры решают раскладку меню, шапок, карточек и строк: gap для отступов, flex-wrap переносит элементы, ось меняется с ряда на колонку. Разметка внутри контейнера выстраивается в строку, а при нехватке места аккуратно переносится.

В реальной разметке flex-wrap: перенос строк встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — основной инструмент для строк: панели, меню, кнопки выровнены за минуту.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

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

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

wrap позволяет строкам переноситься красиво на мобильных.

nowrap сжимает детей и создаёт переполнение.

7. Практическое задание

Сделайте переносимую галерею карточек.

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

.gallery { display: flex; flex-wrap: wrap; }

8. Как применять в проектах

Заголовок + кнопка в одной строке, горизонтальное меню, карточки-строки, центрирование через justify-content и align-items — типичные задачи Flexbox.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

ось выбрана осознанно (row/column);
gap вместо маргинов-костылей;
переносы flex-wrap продуманы на малых экранах;
justify и align заданы явно;
нет жёстких ширин, где должен быть flex;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам