r1d23 Flexbox Patterns
Devoirs de vacances aujourd’hui avec quelques exercices extraits de http://www.flexboxpatterns.com/. Ma production 100daysOfCode du jour s’achèvera sur le troisième exercice des flexbox patterns consistant à construire un en-tête de site.
Vous trouverez ci-dessous mon échantillon de code, avec en bonus :
- Ma première « extraction SVG ». Qui devrait théoriquement s’afficher dans IE9.
- Une couleur d’arrière-plan du menu extraite à la pipette sur le nouveau Pantone Prince !
CSS
Ce type d’échantillon de code (optimisé avec l’aide de mon mentor Todd McLeod) doit pouvoir s’utiliser un en-tête de site web.
Adieu float
La méthode typique pour la construction de ce composant était d’envelopper l’image SVG et les boutons de navigation dans un élément, et les boutons « Paramètres » et « Déconnexion » à l’intérieur d’un autre élément. Ensuite, on utilisait float pour pousser un conteneur vers la gauche et l’autre conteneur vers la droite. Et il fallait rajouter un clearfix sur l’en-tête du site lui-même…
Avec flexbox, fini ce cirque pour une mise en page simple ! Vous aurez encore besoin des éléments de conteneur, mais adieu aux classes spéciales pour ces conteneurs.
Précisions CSS Flexbox
justify-content: space-between pousse les éléments enfants aussi loin de l’autre que possible. À savoir le logo et les boutons de nav à gauche, et le bouton paramètre à droite.
align-items: center centre tous les éléments enfants verticalement le long de l’axe principal dans les conteneurs. C’est important car le logo et les boutons de nav ont des hauteurs différentes. Sans le réglage de cette propriété, ils s’aligneraient par défaut sur le bord du haut.
Attentif à toutes vos remarques sur les optimisations de code pour mes premiers pas sur flex.