Майданчик Flexbox
Експериментуйте з властивостями CSS Flexbox на живих елементах і копіюйте згенерований CSS макета.
—
Усе працює у вашому браузері — нічого не завантажується.
Про Майданчик Flexbox
Flexbox Playground — це практична пісочниця для CSS flexbox. Задайте властивості контейнера — flex-direction, flex-wrap, justify-content, align-items, align-content і gap — і спостерігайте, як до 12 елементів у режимі реального часу перебудовуються в попередньому перегляді при зміні кожного значення. Це найшвидший спосіб зрозуміти, що насправді робить кожна властивість.
Елементи можна редагувати окремо: клацніть на одному, щоб вибрати його, і налаштуйте flex-grow, flex-shrink, flex-basis, align-self і order. Побачити, як один елемент розростається, займаючи вільний простір, поки сусідні зберігають свою ширину, навчить моделі розподілу flex швидше за будь-яку діаграму.
Playground генерує чистий CSS для контейнера та будь-яких елементів із нестандартними налаштуваннями — скопіюйте його прямо у свою таблицю стилів. Усе працює у вашому браузері без жодних завантажень на сервер, а кнопка скидання повертає вас до чистого стану.
Як використовувати Майданчик Flexbox
- Задайте для контейнера flex-direction, wrap, justify-content, align-items, align-content і gap.
- Додайте або видаліть елементи — від 2 до 12 — щоб відтворити ваш реальний компонент.
- Клацніть на елементі та налаштуйте його grow, shrink, basis, align-self і order.
- Спостерігайте за оновленням попереднього перегляду в реальному часі при кожній зміні.
- Скопіюйте згенерований CSS і вставте його у свій проєкт.