Fibonacci Flexbox Composer: простая Flexbox верстка

Веб-приложение Fibonacci Flexbox Composer, разработанное Максом Стинбергеном (Max Steenbergen) из Нидерландов, оказывает неоценимую помощь, когда дело доходит до CSS Flexbox вёрстки. В принципе, для его использования никаких навыков и знаний не понадобится вообще.

Fibonacci Flexbox Composer: визуальный редактор для Flexbox вёрстки

Не стоит отрицать, что к Flexbox верстке достаточно сложно привыкнуть. Если вы хотите использовать Flexbox, при этом не потратив на его изучение уйму времени, то вам понадобится визуальный инструмент, который возьмет на себя написание основной части кода. Здесь на помощь приходит Fibonacci Flexbox Composer Стинбергена.

Вы начинаете с одного блока div, растянутого на всю ширину окна браузера. Теперь вы можете в пару кликов разделить этот div еще на несколько блоков. Если вы хотите задать еще больше суб-контейнеров – слева от редактора для этого есть дополнительная информация. Так как каждый разделенный элемент может быть разделен как вертикально, так и горизонтально, это позволяет создавать огромное количество разных лейаутов.

Как только вы “прокликаете” свой путь к нужному дизайну, просто прокрутите страницу вниз и экспортируйте нужные HTML и CSS файлы, чтобы интегрировать их в свой проект.

• Читайте также: CSS: Создание кнопок с помощью bttn.css

Сначала код вряд ли покажется читабельным.

Тем не менее, немного настойчивости, и вы поймете структуру кода, и как интегрировать свои элементы и контент в нужные места. Рассматривайте работу с этим редактором как хорошую начальную точку для изучения CSS Flexbox.

• Читайте также: 5 Отличных ресурсов по CSS анимации

Перевод статьи Fibonacci Flexbox Composer: Comfortable Tool Makes CSS Flexbox Easy

Автор оригинального текста: Ioanni Mitsakis