CSS3 : la FlexBox

Les CSS3 continuent de nous laisser entrevoir un nouvel avenir pour le développement web de plus en plus proche. Une spécification nouvelle est apparue pour ce qui est des « boîtes » HTML.

On utilise cette notion de « boîte » depuis l’abandon des tableaux, or pour positionner correctement les éléments en CSS c’est souvent fastidieux en raison de navigateurs peu enclins à suivre des standards communs (Internet Explorer notamment).

Depuis sa création, CSS propose officiellement quatre types de rendus d’éléments :

• Le rendu bloc
• Le rendu inline
• Le rendu tabulaire
• Le rendu positionné

Chacune des valeurs de la propriété display (par exemple inline-block), de float, ou de position, renvoie à l’un de ces quatre types de rendus.

CSS3 ajoute un nouveau modèle de boîte : la Flexbox, ou Flexible Box Layout Module.

Ce nouveau mode de positionnement introduit, via la propriété display, un contexte général d’affichage sur un parent et d’en faire hériter ses enfants, exemple :

• Distribution en bloc ou en ligne,
• Des alignements horizontaux et verticaux,
• Gestion des espaces disponibles (fluidité comme des cellules de tableau),
• Organisation des éléments indépendant de l’ordre du flux.

Aujourd’hui cette définition est en version « finale » et n’attend plus que sa validation dans les spécifications des CSS3. Elle est supportée dans ses dernières valeurs par les plus récents navigateurs (attention à l’origine les valeurs de définition étaient différentes).
On peut dire que tous les navigateurs embarqués sur les smartphones la supportent en l’état, pour les navigateurs sur desktop c’est plus délicat, il faut consulter son support avec le tableau ci-contre (source Alsacréations), et là on voit que les préfixes font encore la loi…

Voici la syntaxe finale de ce nouveau type de rendu :

• Display : flex
• Options : order, flex-direction, justify-content + align-items, flex-wrap

Quelques exemples d’utilisation ci-dessous :

.menu {display: flex;}

 /* les éléments enfants s'affichent en colonne */
.menu {flex-direction: column;}

/* les éléments enfants s'affichent en ligne */
.menu {flex-direction: row;}

/* les éléments enfants s'affichent en colonne inversée */
.menu {flex-direction: column-reverse;}

/* les éléments enfants s'affichent en ligne inversée */
.menu {flex-direction: row-reverse;}

L’option nowrap reçoit en plus des classiques wrap et nowrap une possibilité d’inverser la liste des éléments : wrap-reverse. Je vous renvoie, pour plus de renseignements et des démonstrations, à l’article consacré à Flexbox sur Alsacréations.

Bien entendu les navigateurs qui manquent à l’appel de cette nouvelle fonction sont la famille d’Internet Explorer (7, 8, 9), une astuce via javascript est possible mais ne semble pas actualisée. 

Flexbox est une spécification toute nouvelle, supportée partiellement, et comme toute la norme CSS3 elle est à utiliser dans des cas très précis et vers une cible de visiteurs « de niche » utilisant les derniers systèmes et navigateurs du marché. Ce positionnement Flexible Layout apporte de nombreuses nouveautés pour les webdesigners et intégrateurs. Dans un avenir proche, il constitue sans aucun doute la méthode de positionnement la plus pratique et polyvalente.

Sources : W3C, Alsacréations, Benfrain.com