1. Direction задает оси
row делает основную ось горизонтальной, column — вертикальной. При смене направления свойства выравнивания меняют свое визуальное поведение.
Генератор Flexbox
Используйте пресеты для популярных шаблонов или настраивайте каждое свойство вручную. Значения ограничены безопасными диапазонами.
Выбранный элемент
Нажмите на любой элемент, чтобы настроить его отдельно. Значения проверяются перед генерацией.
0
1
0
1
Начальный размер элемента.
Переопределяет общее выравнивание.
Предпросмотр
Контейнер ниже обновляется мгновенно. Подсказки показывают текущие оси для лучшего понимания логики CSS.
Основная ось: горизонтальная. Поперечная: вертикальная.
Готовый код
CSS включает только выбранные свойства. HTML использует семантическую структуру классов для легкой адаптации.
Как это работает
Flexbox располагает дочерние элементы вдоль основной и поперечной осей. Ниже объяснены ключевые концепции простыми словами.
2. Wrap управляет строками
При nowrap свойство align-content не работает. Оно важно только когда элементы переносятся на новые строки и есть лишнее место.
3. Свойства элементов
flex-grow отвечает за расширение, flex-shrink за сжатие, а flex-basis — это базовый размер до начала расчетов.
Примечание: значения basis указаны в пикселях, отступы округлены. Предпросмотр отражает поведение современных браузеров.
Справочник свойств
Используйте как быструю шпаргалку после настройки макета.
justify-content
Двигает элементы вдоль основной оси. Идеально для меню и распределения кнопок.
align-items
Выравнивание всех элементов по поперечной оси. Помогает при разной высоте блоков.
align-self
Индивидуальное выравнивание для одного конкретного элемента.