Глубокое изучение Flexbox: выравнивание, перенос и порядок
Освойте justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis и свойство order.
«Глубокое изучение Flexbox: выравнивание, перенос и порядок» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Повторение: flex-контейнер и flex-элементы
Повторение: display: flex у контейнера превращает его непосредственных потомков в flex-элементы. Главная ось проходит вдоль flex-direction. Поперечная ось перпендикулярна ей.
Значения justify-content подробно
Все значения justify-content для контейнера с направлением строки: flex-start (по умолчанию), flex-end, center, space-between (промежутки только между элементами), space-around (одинаковые внешние отступы вокруг каждого элемента), space-evenly (одинаковые промежутки повсюду).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }align-items и align-content
align-items выравнивает элементы внутри одной строки. align-content выравнивает несколько строк (работает только при значении wrap у flex-wrap и наличии нескольких строк).
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}align-self для отдельных элементов
align-self переопределяет align-items для конкретного flex-элемента. Это полезно, когда нужно растянуть один элемент, а остальные оставить по центру.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */flex-wrap: wrap и wrap-reverse
flex-wrap: wrap позволяет элементам переходить на новые строки. wrap-reverse выполняет перенос в обратном направлении. Объединяйте это свойство с gap, чтобы просто создавать адаптивные сетки.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}flex-grow, flex-shrink и flex-basis
Это три части сокращённой записи flex для элементов. flex-grow: доля доступного пространства. flex-shrink: скорость уменьшения при нехватке места. flex-basis: исходный размер до увеличения или уменьшения.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */Распространённые сокращённые записи flex
flex: 1 = 1 1 0%. flex: auto = 1 1 auto. flex: none = 0 0 auto. flex: 2 = 2 1 0% (занимает вдвое больше места, чем flex: 1).
Свойство order
order изменяет визуальный порядок flex-элементов, не меняя HTML. Значение по умолчанию — 0. Отрицательные значения размещают элементы перед 0. Используйте это свойство осторожно: несоответствие визуального порядка и порядка в DOM сбивает с толку пользователей клавиатуры и программ чтения с экрана.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */min-width: 0 для исправления переполнения
У flex-элементов неявно задано min-width: auto, поэтому они не уменьшаются меньше размера своего содержимого. Задайте min-width: 0, чтобы разрешить им становиться меньше. Это необходимо для обрезки текста внутри flex-элементов.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Промежутки во Flexbox без gap
В старых средах без поддержки gap используйте внешние отступы у элементов и отрицательный внешний отступ у контейнера, чтобы создать промежутки. Однако сегодня gap поддерживается всеми современными браузерами — предпочтительнее использовать его.
Вложенные flex-контейнеры
Любой flex-элемент сам может быть flex-контейнером. Вкладывайте Flexbox для создания сложных макетов: например, ряда карточек, внутреннее содержимое каждой из которых также организовано с помощью Flexbox. Это обычный шаблон современных макетов.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}Быстрая проверка
Какое свойство распределяет пространство между flex-элементами вдоль поперечной оси, когда flex-wrap имеет значение wrap?
Повторение: углублённое изучение Flexbox
justify-content распределяет элементы вдоль главной оси. align-items выравнивает элементы по поперечной оси в одной строке. align-content выравнивает несколько строк по поперечной оси. align-self задаёт выравнивание отдельного элемента. flex-wrap: wrap включает несколько строк. Сокращённая запись flex управляет увеличением, уменьшением и исходным размером. order изменяет визуальный порядок. min-width: 0 предотвращает ошибки при уменьшении.
Часто задаваемые вопросы
Урок «Глубокое изучение Flexbox: выравнивание, перенос и порядок» бесплатный?
Да — полный текст урока «Глубокое изучение Flexbox: выравнивание, перенос и порядок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Глубокое изучение Flexbox: выравнивание, перенос и порядок»?
Освойте justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis и свойство order. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Глубокое изучение Flexbox: выравнивание, перенос и порядок»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Глубокое изучение Flexbox: выравнивание, перенос и порядок
- CSS Grid: template-areas, auto-fit и minmax
- Совместное использование Flexbox и Grid
- Переменные CSS для темизации