Конвертер цветов
Преобразуйте HEX, RGB и HSL с прозрачностью, смотрите образец цвета и копируйте готовые значения CSS.
Генератор CSS Flexbox
Проверьте направление, перенос, распределение и выравнивание и скопируйте соответствующий CSS и HTML.
Об инструменте
Расположите кнопки или элементы управления и посмотрите, что произойдёт при нехватке места.
Как пользоваться
Настройте свойства Flex, интервалы и количество элементов. Меняйте ширину, чтобы увидеть переносы. Код CSS и HTML можно скачать отдельно.
Предпросмотр использует те же свойства, что и код. Базовый размер элемента — 100 px, минимальная высота — 80 px. До 48 элементов, интервалы 0–80 px. Ширина предпросмотра не экспортируется.
Частые вопросы
Ширина предпросмотра включена в код?
Нет, она только моделирует доступное место. Вывод содержит flex-правила и базовые размеры элементов; реальную ширину и оформление задайте на своей странице.
Почему центрирование меняется при выборе column?
justify-content работает по главной оси, align-items — по поперечной. При row главная ось горизонтальна, при column — вертикальна. Для центрирования по обеим осям выберите center в обеих настройках и оставьте в контейнере достаточно свободного места по нужным осям.
Связанные инструменты
Откроется в новой вкладке
Комментарии
0