Premiers pas avec flexbox

Conteneurs et articles Flexbox

Flexbox ou boîte flexible est une méthode de mise en page permettant d’organiser le contenu d’une page de manière prévisible. Flexbox offre une amélioration par rapport au positionnement traditionnel du modèle de bloc à l’aide de flotteurs ou même d’un positionnement de type tableau pour le contenu de la page.

À la base, Flexbox peut être décomposé en un élément parent (conteneur flexible) et un élément enfant (élément flexible).

Conteneur flexible

Un conteneur flexible peut être créé en définissant sa propriété display sur flex :

.container {
  display: flex;
}

Article flexible

Chaque élément enfant d’un conteneur flexible devient un élément flexible. Ces éléments flexibles peuvent ensuite recevoir des propriétés supplémentaires pour modifier leur position sur la page.

.item {
  flex: 1;
}

Cette propriété flex: 1 est un raccourci pour flex-grow: 1 lui permettant de croître par rapport à ses frères et sœurs dans le conteneur.

En les rassemblant, voici le balisage HTML :

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Présentation de la boîte flexible

La disposition Flexbox (boîte flexible), introduite dans CSS3, offre un moyen plus efficace de disposer, d’aligner et de répartir l’espace entre les éléments enfants (“flex items”) dans un élément conteneur (“flex container”). Plus important encore, même lorsque leurs tailles sont inconnues ou dynamiques, d’où le terme “flex” ou “flexible”.

Commençons par les bases et voyons comment un conteneur peut être initialisé en tant que flex.

Considérez le balisage suivant :

<div class="flex-container">
  <div class="flex-item-1"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-3"></div>
</div>

Une flexbox est initialisée en utilisant simplement display: flex. Fait!

.flex-container {
  height: 100px;
  padding: 10px;
  background: grey;

  display: flex; // or display: inline-flex;
}

Maintenant que le conteneur flexible est prêt, jouons avec ses éléments flexibles en leur donnant une largeur de 25 % chacun et en alignant horizontalement au centre les éléments flexibles à l’intérieur de leur conteneur parent.

.flex-item-1 {
  width: 25%;
  background: green;
}

.flex-item-2 {
  width: 25%;
  background: purple;
}

.flex-item-3 {
  width: 25%;
  background: pink;
}

Veuillez noter que j’ai délibérément donné aux 3 enfants une largeur de 25% chacun pour montrer à quel point il est facile de se déplacer autour des enfants dans une flexbox.

Maintenant, lorsque nous exécutons le code ci-dessus, nous devrions voir les 3 enfants dans le conteneur horizontalement les uns à côté des autres. En effet, par défaut, une flexbox a la propriété flex-direction: row. Cela signifie que par défaut, les éléments flexibles seront alignés horizontalement les uns à côté des autres. De plus, il devrait y avoir un espace sur la droite puisque la largeur totale des enfants n’atteint pas 100 %.

Essayez maintenant d’ajouter la propriété justify-content: center au flex-container.

.flex-container {
  ...
  justify-content: center;
}

Le résultat serait que les enfants soient alignés horizontalement au centre. La même propriété a d’autres valeurs telles que flex-end (aligner à droite), space-around (espace égal autour des éléments), space-between (espace égal entre les éléments).

Important : les autres propriétés d’élément de bloc comme text-align: center etc. n’ont aucun effet sur un élément flex.

Installation ou configuration

Flexbox est un module CSS3, standardisé par le World Wide Web Consortium. Il s’agit d’un mode de mise en page pour la disposition des éléments de sorte que les éléments se comportent de manière prévisible lorsque la mise en page doit s’adapter à différentes tailles d’affichage.

Comme il fait partie de CSS3, vous n’avez rien à installer. Il peut être utilisé tant que le navigateur le prend en charge, et la plupart des navigateurs modernes le font. Pour vérifier si votre navigateur le supporte ou non, voici le tableau de compatibilité.

Pour configurer et utiliser flexbox dans votre CSS, ajoutez simplement display: flex à un sélecteur.