• http://www.debussac.net/blog/wp-content/uploads/2017/08/flexbox.jpg

FLEXBOX : le module CSS3 pour un alignement simplifié

Chez Debussac, nous nous adaptons sans cesse pour faire évoluer nos techniques et vous proposer des sites internet toujours plus performants et visuellement attrayants. Pour cela, nous utilisons désormais le module Flexbox pour gérer l’alignement et la disposition des différents éléments qui composent les pages de nos sites web (header, footer, menu, …).

Flexbox : qu’est-ce que c’est ?

Flexbox est un module CSS3 qui permet de gérer de manière simple l’alignement et la disposition de blocs dans un conteneur.

Auparavant, il était nécessaire d’utiliser la propriété « float » pour pouvoir aligner un bloc à gauche et un autre à droite. Mais ne permettant que ne choisir entre gauche et droite, cette propriété a vite montré ses limites.

Pour répondre à cette problématique, le module Flexbox CSS3 a alors été développé pour étendre ce périmètre en offrant de nouvelles possibilités :

  • L’alignement toujours à gauche ou à droite, mais également de façon centrée ou justifiée,
  • L’orientation pour un centrage des blocs de manière verticale ou horizontale,
  • La hauteur des blocs peut également être spécifiée pour être harmonisée (et ainsi éviter l’utilisation de bibliothèques javascript pour gérer les hauteurs),
  • L’ordre des blocs de façon indépendante, pour passer en mode responsive par exemple.

Les avantages du module Flexbox

Les avantages sont donc nombreux et l’arrivée de ce module a été plus qu’appréciée et attendue dans le monde du développement web.

De manière générale, la gestion de l’alignement des blocs est donc grandement simplifiée.
Il est également possible d’inverser l’ordre des blocs de façon très simple et ainsi indiquer qu’un bloc doit passer avant un autre en une seule ligne de code : ultra pratique en mode responsive par exemple !

On peut désormais avoir des blocs de même hauteur, même si leur contenu n’est pas de la même hauteur, et ce sans utiliser de bibliothèques javascript (align-items: stretch).

Enfin, la grande majorité des navigateurs récents supporte désormais ce module et ne pose aucune problématique d’interprétation. L’usage de Flexbox permettra ainsi un meilleur rendu et de nouvelles possibilités pour votre site. Pour connaître en détails les navigateurs et versions concernées c’est par ici.

Pour aller plus loin, nous vous invitons également à découvrir cet article qui vous propose une battle Flexbox vs CSS classique ou encore ce guide (en anglais) très visuel qui utilise des gifs animés.