Песочница 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 и вставьте его в свой проект.