Flexbox, l’évolution des boîtes CSS3

25 avril 2016 Général 0 Comments

Bonsoir, j’aimerais vous parler d’une grande évolution que très peu de personnes utilisent encore malheureusement, le module Flexbox, spécification CSS3 permettant le contrôle de boîtes flexibles/fluides. Tout le monde connait le modèle de boîte « classique », je parle de l’attribution « block » et « inline » mais depuis quelques année la révolution est en marche.

flexbox

La naissance de Flexbox

Pourtant présente depuis 2009 mais ayant subis 3 refontes consécutives, les intégrateurs ne l’ont pas encore adopté. Par un souhait des éditeurs de la spécification, les nombreuses retouches ont faient que ce module n’a pu encore se diffuser largement dans les intégrations courantes de sites, notamment, je pense aux sites en responsive design.

Flexbox, comment ça marche

Fini le « float », « block » ou le « inline », avec Flexbox il faut penser autrement, voici les 4 caractéristiques possibles :

  • Distribution : les éléments peuvent être bougés horizontalement ou verticalement avec autorisation ou non du passage à la ligne
  • Alignement : spécifiez comme vous le souhaité l’alignement des éléments, même verticalement !
  • Organisation : indépendamment du flux (DOM), changez les choses sans tout casser
  • Espaces : enfin modifiez et spécifiez vos besoins en espace pour chaque élément, c’est magique

Compatible sur la plupart des navigateurs de bureaux et mobiles récents et mêmes anciens, seul vraiment IE a un peu de mal (mais ça nous sommes habitués…).
Il ne faut donc pas se gêner pour l’utiliser dans vos prochains projets.

Concrètement voici Flexbox

Pour de ce qui est d’exemples, n’étant pas intégrateur, je ne peux vous conseiller d’aller voir cet article dont je tire mon billet, afin que vous poussiez vous faire une opinion.
Oui Flexbox a beaucoup de possibilités et reste complexe mais va surement devenir un « must have » sur vos futurs sites tellement sa logique va vous surprendre, on attendait ça depuis des années.

Voici quelques liens afin d’étayer les explications sur ce formidable module.

Merci à Raphaël du site alsacréations pour son article que je cite plus haut. Il m’a permis de découvrir ce module et voici pourquoi je me suis permis de faire cet article. Cette propriété CSS3 doit être connue le plus vite possible !

C’est tout pour ce soir, bonne soirée et bon surf à tous !