Генератор CSS flexbox
Меняйте параметры и сразу смотрите, как двигаются элементы. Код внизу показывает только то, что вы изменили относительно значений по умолчанию.
Как пользоватьсяFlexbox без заучивания свойств
Доступно на: 
Генератор CSS flexbox: для чего нужен
Flexbox — самый распространённый способ выравнивать элементы в ряд или столбец в CSS, но названия свойств сбивают с толку тех, кто только начинает.
Здесь вы меняете каждый параметр в переключателе и сразу видите, как двигаются элементы: направление, перенос строк, распределение по главной оси, выравнивание по поперечной оси, align-content и расстояние между элементами. Код показывает только то, что изменено относительно значений по умолчанию, и предупреждает, когда свойство не действует при остальных выбранных параметрах.
Как пользоваться
- Выберите параметры направления, выравнивания и переноса.
- Настройте gap, число элементов и растущий элемент.
- Скопируйте CSS контейнера.
Когда использовать
- Центрирование элемента на экране.
- Создание меню или ряда кнопок.
- Изучение flexbox на практике.
Частые вопросы
В чём разница между justify-content и align-items?
justify-content распределяет элементы по главной оси (по горизонтали, если направление row), а align-items выравнивает по поперечной оси (по вертикали в том же случае). Если сменить направление на column, оси меняются местами.
Когда использовать flexbox, а когда grid?
Flexbox — для одного измерения: ряд кнопок, меню, элементы, которые подстраиваются под место. Grid — для двух измерений сразу, например галерея или макет страницы. Их можно использовать вместе.
Для чего нужен gap?
Задаёт расстояние между элементами без внешнего отступа по краям, что раньше требовало margin и селекторов вроде :last-child. Работает с flexbox во всех актуальных браузерах.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.