Песочница Flexbox
Экспериментируйте со свойствами CSS Flexbox на живых элементах и копируйте сгенерированный CSS макета.
—
Всё выполняется в вашем браузере — ничего не загружается.
О Песочница Flexbox
Песочница Flexbox — это практическая площадка для CSS flexbox. Настройте свойства контейнера — flex-direction, flex-wrap, justify-content, align-items, align-content и gap — и наблюдайте, как до 12 живых элементов перестраиваются в превью при каждом изменении значения. Это самый быстрый способ по-настоящему понять, что делает каждое свойство.
Элементы редактируются индивидуально: кликните по одному, чтобы выбрать его, и настройте flex-grow, flex-shrink, flex-basis, align-self и order. Наблюдение за тем, как один элемент разрастается, забирая свободное пространство, пока соседние сохраняют свою ширину, учит модели гибкого размера быстрее любой диаграммы.
Песочница генерирует чистый CSS для контейнера и для любых элементов с нестандартными настройками — скопируйте его прямо в таблицу стилей. Всё выполняется в вашем браузере, ничего не загружается на сервер, а кнопка сброса возвращает всё к чистому состоянию.
Как использовать Песочница Flexbox
- Настройте flex-direction, wrap, justify-content, align-items, align-content и gap контейнера.
- Добавьте или удалите элементы — от 2 до 12 — чтобы отразить ваш реальный компонент.
- Кликните по элементу и настройте его grow, shrink, basis, align-self и order.
- Наблюдайте, как живое превью обновляется при каждом изменении.
- Скопируйте сгенерированный CSS и вставьте его в свой проект.