Flexbox et Grid Layout : les nouvelles techniques de mise en page du web !

Flexbox et Grid Layout : les nouvelles techniques de mise en page du web !

Le web est un univers en perpétuelle expansion mettant aujourd’hui en lumière de nouvelles perspectives de mise en page. Flexbox et Grid Layout sont les deux principales techniques CSS qui révolutionnent la manière de diviser l’espace d’une page ou d’une application web. Le CEPEGRA vous propose deux nouvelles formations d’un jour afin de les découvrir ou les approfondir.

Flexbox, l’ère de l’Internet flexible

Introduit à l’origine en juillet 2009, Flexbox n’est pas très récent mais il a fallu patienter quelques années pour que le module soit adopté et puisse être utilisé en production. Il résout bon nombre de problèmes récurrents avec une simplicité déconcertante. On en oublierait les positionnements flottants (float) et les affichages de type inline-block. Le centrage vertical devient enfin possible !

En pratique, on définit un conteneur dans lequel les éléments pourront être distribués soit verticalement, soit horizontalement. D’autres options permettent de gérer l’agencement à l’intérieur de celui-ci de façon précise. On peut citer également d’autres avantages tels qu’une hauteur identique et la gestion de l’ordre des éléments au sein du conteneur. N’oublions pas la faculté des éléments enfants de pouvoir occuper l’espace mis à leur disposition, véritable pierre angulaire de la flexibilité.

Cela réduit considérablement le nombre de ligne de code CSS et rend le code beaucoup plus lisible. Le travail se voit considérablement allégé.

Grid Layout, entrez dans une nouvelle dimension !

Grid Layout n’est pas très récent non plus, les prémices datent de 2004. Néanmoins le support de cette nouvelle spécification n’a été adopté qu’à partir de la version 57 de Chrome, la version 52 de Firefox et la version 10.1 de Safari.

Ce qui nous ramène à mars 2017. Il aura fallu attendre encore octobre dernier et la version 16 pour le navigateur Edge de Microsoft. Internet Explorer reste à la traîne et n’adopte pas encore complètement cette technologie.

Lire l’entièreté de l’article sur le blog du CEPEGRA

Quelques photos

Nos partenaires