Об этом инструменте
The CSS Flexbox Playground — интерактивный редактор основных свойств раскладки flex-контейнера. Выберите значения для flex-direction, justify-content, align-items и flex-wrap из четырёх выпадающих списков, и превью из пяти пронумерованных блоков мгновенно перестроится, чтобы вы увидели, как каждое свойство формирует раскладку, ещё до написания кода.
Под превью по мере работы генерируется соответствующее правило .container: display: flex, за которым следуют четыре выбранных вами объявления. Одна кнопка копирует весь блок в буфер обмена, готовый к вставке в таблицу стилей. Открыты только эти свойства уровня контейнера; настройки уровня элементов, такие как flex-grow, order или align-self, не охватываются.
Всё работает в вашем браузере. Ничего не загружается, нет аккаунтов и отслеживания, и работает офлайн. Это быстрый способ развить интуицию по flexbox или получить стартовое правило, которое вы затем доработаете вручную.
Часто задаваемые вопросы
Что показывает превью?
Flex-контейнер с пятью пронумерованными блоками, которые перестраиваются вживую при изменении flex-direction, justify-content, align-items или flex-wrap.
Готов ли сгенерированный CSS к использованию?
Да. Скопируйте сгенерированное правило .container прямо в вашу таблицу стилей; оно содержит display: flex плюс четыре выбранных свойства.
Какие свойства flexbox можно настраивать?
Четыре выпадающих списка управляют flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) и flex-wrap (nowrap, wrap, wrap-reverse).
Включает ли вывод gap или настройки flex для отдельных элементов?
Нет. Скопированное правило содержит только display: flex и четыре свойства контейнера. Зазор 8px в превью нужен только для отступов, а свойства уровня элементов, такие как flex-grow, order или align-self, не включаются.
Больше инструментов