Actualités WordPress, CSS & Webdesign, OceanWP & Elementor.

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.

CSS3 Flexbox Layout moduleOn 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.

Compatibilité de la Flexbox css3Aujourd’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

Cet article a 4 commentaires

  1. Ça semble pas mal cette flexbox, je débute sur CSS3 et HTML5 et les changements Vs HTML4/CSS2 sont assez importants, qu’en penses-tu ?

  2. Comme tout ce qui est CSS3 ça passe parfois très mal sur du ie et autre Firefox un peu ancien, mais qui s’en préoccupe encore ?

  3. Les CSS3 c’est joli… mais pour l’instant j’évite. mais cette fonction à l’air super pratique pour contruite et manier les éléments enfants d’un parent;

    1. C’est l’avenir, il faut donc dès aujourd’hui si mettre… tout en restant dans la compatibilité demandée actuellement. Si Windows 8 marche fort en 2013 on pourra être rassuré en 2014 sur les développements réalisés sur cette base.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Fermer le menu