Aller au contenu principal

Premiers pas avec Flexbox

Devenez le maître de l'alignement

Notions théoriques​

Flexbox est une méthode de mise en page (standard du CSS3) qui permet de créer facilement une page Web responsive (les éléments sont automatiquement réagencés selon la taille de l'écran).

Les conteneurs et les éléments flex​

Le conteneur flex est un élément parent, qui regroupe un tas d'éléments d'enfants, les éléments flex.

Dans la plupart des cas, le conteneur définit la disposition et la position de ses éléments flex, cependant, les éléments flex peuvent être manipulés individuellement.

L’axe principal et l’axe transversal​

Avec Flexbox, les éléments se dilatent ou se rétractent pour occuper l'espace disponible selon un axe principal.

La première chose à comprendre est la propriété display: flex.

En définissant cette propriété sur un élément, vous le transformez en conteneur flexible, c'est à dire que tous ses enfants directs deviennent des éléments flexibles.

Dans Flexbox, nous avons 2 axes : l'axe principal et l'axe transversal.

Avec la propriété display: flex, par défaut :

  • l'axe principal main axis est horizontal
  • et l'axe transversal cross axis est vertical.

Avec la propriété display: flex-direction, nous inversons ces 2 axes :

  • l'axe principal est vertical
  • et l'axe transversal est horizontal.
  • L'axe principal main axis est l'axe de la direction dans laquelle sont disposés les éléments flex.

    Le début et la fin de cet axe sont appelés main start et main end.

  • L'axe cross axis est l'axe perpendiculaire à l'axe principal.

    Le début et la fin de cet axe sont appelés cross start et cross end.

  • L'élément parent (dont la propriété est display:) est appelé flex container.
  • Les éléments à l'intérieur du conteneur flex sont appelés flex items.

Ensuite, nous avons les propriétés justify-content et align-items :

La propriété justify-content:​

La propriété justify-content: contrôle l'alignement des flex items le long de l'axe principal.

La propriété align-items:​

La propriété align-items: contrôle l'alignement des flex items le long de l'axe transversal.

Pour en savoir plus : https://developer.mozilla.org/

Exemple pratique​

Imaginons que nous avons une barre de navigation avec 3 liens.

Nous voulons que ces liens soient centrés horizontalement et verticalement.

Voici comment nous pourrions le faire avec Flexbox :

<nav style="display: flex; justify-content: space-around; align-items: center;">
  <a href="#">Présentation</a>
  <a href="#">Mon projet</a>
  <a href="#">Expériences</a>
  <a href="#">Formation</a>
  <a href="#">Contact</a>
</nav>

Avec ce code, notre barre de navigation est un conteneur flexible, et les liens sont des éléments flexibles (flex items).

  • justify-content: space-around; : Les flex items sont alignés de façon équitable le long de l'axe principal.
  • align-items: center; : Les flex items sont centrés selon l'axe transversal.

Test de mémorisation/compréhension​


Qu'est-ce que Flexbox ?


Que fait la propriété 'display: flex' ?


Que contrôle la propriété 'justify-content' ?


Que contrôle la propriété 'align-items' ?


Quels sont les deux axes dans Flexbox ?


TP pour réfléchir et résoudre des problèmes​

Votre mission consiste à créer une barre de navigation pour votre portfolio.

Voici un exemple de ce à quoi cela pourrait ressembler :

<nav>
  <a href="#about">A propos de moi</a>
  <a href="#projects">Mes projets</a>
  <a href="#contact">Me contacter</a>
</nav>

Vous pouvez ajouter d'autres liens.

Ces liens doivent être :

  • alignés de façon équitable horizontalement
  • et centrés verticalement.
Une solution

Voici une solution possible pour le TP :

<nav style="display: flex; justify-content: space-around; align-items: center;">
  <a href="#about">A propos de moi</a>
  <a href="#project">Mon projet professionnel</a>
  <a href="#projects">Projets réalisés</a>
  <a href="#veille">Veille technologique</a>
  <a href="#contact">Me contacter</a>
</nav>