Flexbox площадка
Експериментирайте с CSS Flexbox свойства върху елементи на живо и копирайте генерирания CSS за оформление.
—
Всичко работи във вашия браузър — нищо не се качва.
За Flexbox площадка
Плейграундът за Flexbox е практична пясъчна кутия за CSS flexbox. Задайте свойствата на контейнера — flex-direction, flex-wrap, justify-content, align-items, align-content и разстояние — и наблюдавайте до 12 елемента на живо да се пренареждат в прегледа при всяка промяна на стойност. Това е най-бързият начин да усвоите какво всъщност прави всяко свойство.
Елементите се редактират индивидуално: кликнете един, за да го изберете, и коригирайте неговите flex-grow, flex-shrink, flex-basis, align-self и ред. Виждането как един елемент нараства, за да погълне свободното пространство, докато съседите му запазват ширината си, учи модела за оразмеряване на flex по-бързо от всяка диаграма.
Плейграундът генерира чист CSS за контейнера и всички елементи с настройки, различни от подразбиращите се — копирайте го директно в стиловата си таблица. Всичко работи във вашия браузър без качване, а бутон за нулиране ви връща към чисто състояние.
Как да използвате Flexbox площадка
- Задайте flex-direction, wrap, justify-content, align-items, align-content и разстояние на контейнера.
- Добавете или премахнете елементи — между 2 и 12 — за да отразят реалния ви компонент.
- Кликнете елемент и настройте неговите grow, shrink, basis, align-self и ред.
- Наблюдавайте как прегледът на живо се обновява при всяка промяна.
- Копирайте генерирания CSS и го поставете в проекта си.