Web

Flex

Flex

Le module CSS Flexbox est un moyen de positionner les éléments d’une page Web de manière flexible. Il permet de créer des mises en page complexes et réactives sans utiliser de flottants ou de positionnement. Il permet aussi de rendre un site web responsive.

Propriétés Flexbox

Le module Flexbox définit plusieurs propriétés pour contrôler le comportement des éléments flexibles. Voici quelques-unes des propriétés les plus couramment utilisées:

  • display: définit le type d’affichage de l’élément. Ex: display: flex;
  • flex-direction: définit la direction principale des éléments flexibles. Ex: flex-direction: row; ou flex-direction: column;. Row pour une disposition horizontale et column pour une disposition verticale.
  • flex-wrap: définit si les éléments flexibles doivent être enroulés sur plusieurs lignes. Ex: flex-wrap: nowrap; ou flex-wrap: wrap;.
  • flex-flow: raccourci pour flex-direction et flex-wrap. Ex: flex-flow: row nowrap;.
  • justify-content: définit l’alignement des éléments flexibles le long de l’axe principal. Ex: justify-content: center;.
  • align-items: définit l’alignement des éléments flexibles. Ex: align-items: center;.
  • align-content: définit l’alignement des lignes flexibles. Ex: align-content: center;.

Playground

Il existe un site web pour pouvoir jouer et découvrir les différentes propriétés de Flexbox: Flexbox Playground