Flexbox-конструктор CSS — бесплатно онлайн
Выстроить блоки так, как нужно, через flexbox порой похоже на угадайку. Меняешь одну настройку — макет прыгает, и так туда-сюда, пока что-то не сложится. Мы добавили бесплатный инструмент, который избавляет от этой возни — CSS Flexbox Playground — прямо в браузере.
Что он делает
Вы нажимаете на свойства flexbox, и блоки перестраиваются прямо у вас на глазах, в реальном времени. Пробуйте разное направление, отступы и выравнивание, пока макет не станет таким, как надо, а потом копируйте CSS контейнера. Это быстрый способ по-настоящему понять, как работает flex, и сразу взять нужный код.
Ничего не покидает ваше устройство
Всё происходит в браузере. Никакой загрузки, ничего не сохраняется на сервере — вы просто играете с живым превью на своём экране. Закрыли вкладку — и всё исчезло.
Как пользоваться
- Откройте CSS Flexbox Playground в браузере.
- Нажимайте на свойства flexbox и смотрите, как блоки перестраиваются, пока макет не станет таким, как вам нужно.
- Скопируйте CSS контейнера и вставьте его в свой проект.
Это бесплатно и без ограничений. Другие небольшие инструменты есть на странице приложений.