Flexbox CSS3
Flexbox CSS3 : suivez le guide !
Nouveautés de la mise en page CSS avec Flexbox

Flexbox est un nouveau mode de mise en page basé sur un modèle de boite «flexible» full CSS. Petit tour d'horizon des concepts les plus intéressants et des possibilités apportées par le système Flexbox CSS3.

26 août 2016 Actualité, Design, Divers Publié par Alexandre D.

Qu’est-ce que le modèle Flexbox CSS3 ?

Comme son nom l’indique, Flexbox est une méthode en CSS3 de mise en page flexible. Le système Flexbox CSS3, c’est un peu comme les poupées russes, un conteneur avec à l’intérieur plusieurs éléments que l’on peut organiser en CSS3 selon les 4 grandes possibilités suivantes :

  • Distribuer en CSS les éléments de manière horizontale ou verticale, avec passage à la ligne ou non ;
  • Aligner, centrer verticalement et horizontalement ;
  • Réorganiser l’ordre d’affichage des différents blocs ;
  • Gérer les espaces disponibles entre les différents éléments (fluidité).

Nous nous concentrerons sur les principes de base de Flexbox CSS3, tout en laissant de côté les propriétés plus évoluées qui ne vous servirons à rien si les basiques ne sont pas déjà maîtrisés.

Disposition Flexbox : Horizontal ou vertical ?

Pour créer une disposition flex, il suffit d’ajouter la propriété CSS suivante au conteneur parent :

.container {display: flex;}

Cette ligne de code CSS3, qui est le cœur de la disposition Flexbox, aura pour effet d’aligner en CSS les enfants du bloc conteneur les uns à côté des autres.

Disposition flexbox horizontale en CSS3

Si vous voulez changer d’axe et empiler verticalement les blocs, il suffit d’ajouter la propriété Flexbox CSS flex-direction, comme suit :

.container {display: flex; flex-direction: column;}

Disposition Flexbox CSS verticale

D’autres valeurs CSS peuvent être associées à la propriété CSS3 justify-center :

  • flex- (par défaut) : les items sont regroupés en début de ligne
  • flex-end : les éléments sont regroupés en fin de ligne
  • space-between : les blocs sont sur la ligne, le premier étant collé du côté gauche et le dernier, du côté droit
  • space-around : les éléments sont répartis sur la ligne avec un espacement égal autour de chacun

Les items et l’axe secondaire 

Avec la commande CSS align-items, nous pouvons changer le placement des éléments sur l’axe secondaire, il peut alors prendre les valeurs suivantes :

  • flex-start : l'élément est placé au début
  • flex-end : l’élément est placé à la fin
  • center : les blocs sont centrés
  • baseline : les blocs sont alignés sur leur ligne de base (comme flex-start)
  • stretch (par défaut) : les items sont étirés jusqu'à remplir le container (tout en respectant min-width/max-width)
Alignement CSS3 Flexbox

La propriété CSS flex-direction étblit l’axe principal et possède plusieurs valeurs :

  • Row (valeur par défaut) : de gauche à droite (si la lecture se fait dans ce sens)
  • Row-reverse : inverse le sens
  • Colum : comme row mais du haut vers le bas
  • Column-reverse : comme row-reverse mais du bas vers le haut

Justification et alignement des éléments Flexbox en CSS 

Pour mieux comprendre le positionnement en CSS3 des éléments avec Flexbox, il faut bien comprendre qu’il y a 2 axes : un axe principal et un secondaire. L’axe principal est celui sur lequel sont disposés les éléments : admettons que les blocs sont disposés verticalement, alors l’axe primaire est vertical et l’axe secondaire est horizontal … et vice versa.

La propriété CSS3 justify-content permet d’aligner les éléments le long de l’axe principal, le code ci-après permettant par exemple de centrer les éléments :

.container {display: flex; flex-direction: row; justify-content: center;} 

Justification CSS avec flexbox

Hey Browser !

Le module Flexbox CSS3 est reconnu par la plupart des navigateurs modernes incluant même Internet Explorer 11 et Edge.

Compatibilité navigateurs flexbox

Pour les versions inférieures à IE10, le module Flexbox CSS3 ne fonctionne pas correctement.

Certains navigateurs demandent l’ajout de préfixes dont voici la liste :

  • Ajoutez le préfixe -ms- pour IE10 (non nécessaire pour IE11)

Pour les versions anciennes de Chrome, Opera, Safari le préfixe CSS -webkit- est une nécessité, de même que pour le navigateur Android.

Quant à Firefox, le préfixe CSS -moz- est utile pour les anciennes versions du navigateur.

Conclusion 

On pourrait définir le module Flexbox ainsi : Efficacité ! L’idée est de pouvoir créer des mises en page complexes en CSS3 avec relativement peu de code. Bien que le sujet Flexbox est vaste et relativement complexe, nous espérons que vous pourrez l’utiliser facilement avec les bases vues dans cet article.

Partager cette page