8 мин чтения
2026-01-19
Flexbox — модель компоновки CSS, которая позволяет эффективно распределять пространство между элементами и выравнивать их в контейнере.
Flex-контейнер — родительский элемент с `display: flex`
Flex-элементы — дочерние элементы контейнера
Главная ось — направление размещения элементов
Поперечная ось — перпендикулярная главной
| Свойство | Значения | Описание |
|---|---|---|
| flex-direction | row, column | Направление оси |
| justify-content | center, space-between | Выравнивание по главной оси |
| align-items | center, stretch | Выравнивание по поперечной оси |
| flex-wrap | wrap, nowrap | Перенос элементов |
| gap | px, rem | Промежутки между элементами |
`flex-grow` — коэффициент растяжения
`flex-shrink` — коэффициент сжатия
`flex-basis` — начальный размер
`align-self` — индивидуальное выравнивание
`order` — порядок отображения
Визуально настраивайте свойства Flexbox и мгновенно видите результат. Копируйте готовый CSS-код.
Смотрите также: Grid Playground, CSS Minifier, Color Picker
Интерактивная площадка для изучения CSS Flexbox
Открыть инструмент