Modèles Flexbox La bibliothèque de codes Flexbox CSS par excellence

La dernière propriété CSS flexbox a radicalement changé la façon dont les développeurs créent des interfaces. Finis les flottants et les hacks CSS pour aligner parfaitement les mises en page. Ne vous souciez plus des techniques réactives personnalisées pour la gestion des dispositions multicolonnes.

Mais même si flexbox résout de nombreux problèmes, il est également compliqué à apprendre. Pour vous aider à démarrer, une nouvelle bibliothèque en ligne appelée Flexbox Patterns répertorie de nombreux éléments flexbox différents dans un emplacement centralisé..

Cette librairie est totalement gratuite et source ouverte sur GitHub. Tous les exemples peuvent être téléchargé localement via NPM ou via GitHub. Mais vous pouvez également parcourir les exemples sur le site Web pour copier et coller les codes si nécessaire.

Chaque modèle a sa propre page avec une brève description et des exemples de code. Vous pouvez littéralement copier et coller les codes dans votre projet web existant, bien qu'il soit recommandé que vous en appreniez d'abord un peu plus sur ce que le code fait et pourquoi vous l'utilisez.

Prenez par exemple la démonstration de la barre d’en-tête du site utilisant flexbox pour aligner tous les éléments d’une barre de navigation supérieure côte à côte..

En règle générale, cela nécessiterait des flottants et une classe de correctifs pour tout aligner correctement.

Avec Flexbox, vous pouvez tout contenir dans un seul conteneur en utilisant le affichage: flex propriété. De cette façon, vous pouvez définir comment les éléments doivent interagir les uns avec les autres et comment la flexbox devrait fonctionner sur des écrans plus petits.

Les motifs sont constamment mis à jour et la bibliothèque actuelle se concentre sur les éléments les plus courants tels que les onglets, les barres latérales et le centrage vertical / horizontal..

Si vous êtes nouveau sur Flexbox, alors jetez un coup d'œil à Flexbox Patterns. Le site ne vous apprendra pas toutes les bases de la flexbox, mais vous offrira des exemples concrets que vous pourrez bricoler pour vos propres projets Web..