Tutoriel Vidéo CSS Flexbox

Télécharger la vidéo

06-09-2016 12:00:00

Flexbox est un nouveau mode de mise en page (display) qui permet de disposer les éléments de manière plus flexible et de gérer de manière prévisible leur alignement quelque soit la taille de l'écran. Ce nouveau mode de disposition vient se positionner comme une amélioration du modèle block reposant sur les floats.

Fonctionnement de base

Pour utiliser les flexbox il suffit de mettre un display:flex sur l'élément englobant plusieurs enfants. Les enfants directs se placeront alors les uns à côté des autres en essayant d'occuper tout l'espace disponible. Il est ensuite possible de piloter le comportement des enfants gràce à des propriétés comme flex-direction, flex-wrap, justify-content, etc...

Pour l'ensemble des propriétés disponibles je vous renvois vers cette page css-tricks.com qui résume très bien ces propriétés et leur effet sur les éléments en flex.

Compatibilité

Les flexbox sont supportées par tous les navigateur modernes sauf Internet Explorer (on commence à avoir l'habitude...)

  • IE11 supporte assez bien les flexbox mais possède quelques bugs dans certains cas (cf caniuse.com)
  • IE10 supporte les flexbox mais avec la syntaxe de 2012, il faudra donc utiliser un preprocesseur pour adapter votre code à ce navigateur.
  • IE 9-, ne supporte pas les flexbox