Про цей інструмент
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, не включаються.
Більше інструментів