Модели на Flexbox The Ultimate CSS Flexbox кодова библиотека

Най-новото свойство CSS flexbox радикално промени начина, по който разработчиците създават интерфейси. Няма повече плувки и CSS хакове, за да се подредят идеално оформлението. Няма повече притеснения за персонализираните техники за реагиране при работа с множество колони.

Но макар че flexbox решава много проблеми, също е сложно да се учи. За да ви помогнем да започнете, има нова онлайн библиотека, наречена Flexbox Patterns, която каталогизира много различни flexbox елементи в едно централно място.

Тази библиотека е напълно безплатна за използване и е отворена с произход от GitHub. Всички примери могат да бъдат изтеглени локално чрез НПМ или чрез GitHub. Но можете също да прегледате примерите чрез уебсайта, за да копирате и поставите кодове, ако е необходимо.

Всеки модел има своя собствена страница с кратко описание и примерни кодове. Можете съвсем буквално копирайте и поставете кодовете в съществуващия си уеб проект, въпреки че е препоръчително първо да научите малко за това какво прави кодът и защо го използвате.

Вземете например демонстрацията на заглавната лента на сайта, като използвате flexbox, за да подравните всички елементи в горната лента за навигация една до друга.

Обикновено това изисква плувки и клас на clearfix, за да се подравни всичко.

С flexbox можете да държите всичко в един контейнер, като използвате дисплей: flex Имот. По този начин можете да определят как трябва да взаимодействат елементите един с друг и как flexbox трябва да работи на по-малки екрани.

Моделите постоянно се актуализират и текущата библиотека се фокусира върху най-често срещаните елементи, като раздели, странични ленти и вертикално / хоризонтално центриране.

Ако сте чисто нов за flexbox тогава определено проверете Flexbox Patterns. Сайтът няма да ви научи на всички основи на flexbox, но ще ви предложи реални примери, с които можете да се заемете за собствените си уеб проекти.