Шаблони Flexbox The Ultimate CSS Flexbox Code Library

Найновіша властивість CSS flexbox радикально змінила спосіб створення розробниками інтерфейсів. Немає більше поплавців і CSS хакі, щоб отримати макети вирівняні ідеально. Більше не турбуватися про те, як миттєво реагуватимемо на способи обробки багатоскладових макетів.

Але хоча flexbox вирішує багато проблем, це також складно вивчити. Щоб допомогти вам розпочати роботу, є нова онлайнова бібліотека Flexbox Patterns, яка каталогізує багато різних елементів flexbox в одне центральне місце.

Ця бібліотека повністю вільна для використання і відкрита на GitHub. Всі приклади можуть бути завантажується локально через NPM або через GitHub. Але ви також можете переглядати приклади через веб-сайт, щоб копіювати та вставляти коди за потребою.

Кожен шаблон має свою власну сторінку з коротким описом і зразками коду. Ви можете цілком буквально скопіюйте та вставте коди в існуючий веб-проект, хоча рекомендується спочатку трохи дізнатися про те, що робить код і чому ви його використовуєте.

Візьміть для прикладу демо-версію заголовка сайту, використовуючи flexbox, щоб вирівняти всі елементи у верхній навігаційній панелі поруч.

Як правило, це вимагає поплавців і класу clearfix, щоб все було вирівняно належним чином.

З flexbox ви можете тримати все в одному контейнері за допомогою дисплей: flex власності. Таким чином ви можете визначити, як елементи повинні взаємодіяти один з одним і як флексбокс повинні працювати на менших екранах.

Моделі постійно оновлюються, а поточна бібліотека фокусується на найпоширеніших елементах, таких як вкладки, бічні панелі та вертикальні / горизонтальні центри.

Якщо ви новачок у flexbox, то обов'язково перевірте Flexbox Patterns. Сайт не навчить вас всім основам flexbox, але він буде пропонувати реальні приклади, з якими можна займатися для власних веб-проектів.