Генератор CSS flexbox
Візуально створюйте flex-контейнер та його елементи, потім скопіюйте CSS, класи Tailwind або вбудований стиль.
Генератор CSS flexbox
Встановлюйте flex-direction, flex-wrap, justify-content, align-items та align-content за допомогою розпадаючих меню, додавайте проміжок у будь-якій одиниці, і цей інструмент напишу правило flex-контейнера для вас — разом з відповідним правилом для його елементів та невеликим текстовим попереднім переглядом, що показує, як вишикуються блоки. Використовуйте його для створення навігаційної панелі, рядка карток, панелі інструментів форми або будь-якого макета, якому потрібен розподіл, центрування або перенесення елементів без використання повної сітки.
Елементи управління елементів застосовують flex-grow, flex-shrink та flex-basis рівномірно до всієї вибраної кількості елементів, що відповідає тому, як працюють більшість реальних flex-рядків: один клас елемента керує кількома блоками замість окремих значень для кожного блока. Align-content з'являється у результаті тільки тоді, коли flex-wrap встановлено на wrap або wrap-reverse, оскільки браузери ігнорують його в іншому випадку — інструмент ніколи не виводить оголошення, яке нічого не робить.
Оберіть формат результату, що відповідає вашому способу розробки: звичайний CSS для таблиці стилів, утиліти Tailwind (дужки довільних значень охоплюють проміжки та базу, які не знаходяться на шкалі расстояний за замовчуванням), або вбудований атрибут стилю для швидкого прототипування або безпечної розмітки електронної пошти. Кожне значення оновлюється у момент зміни параметра, і попередній перегляд макета перемальовується — жодних етапів збірки, жодного зовнішнього CSS для завантаження.
Все працює локально у вашому браузері; ніщо з того, що ви налаштовуєте тут, не відправляється ніде. Коли CSS виглядає правильно, скопіюйте його, завантажте як файл .txt або відправте назад у ввід, щоб продовжити ітерацію з іншим інструментом.