Flexbox partie 2 - Leonel Ngoya

Hey,
Ça fait un bail ( plus d'un an 😬 ), alors pour mon retour j'ai décidé de continuer la série sur FlexBox parceque oui, il y'a déjà eu un premier article sur ce sujet que vous pouvez consulter ICI, article que je vous conseille de consulter pour bien comprendre la suite de la série FlexBox.

Dans l'article précédent on a parlé de la propriété display: flex; qui permet de transformer un élément en conteneur flex et aussi de flex-direction qui permet de définir comment les éléments enfants vont s'aligner mais sutout, je vous ai aussi parlé de deux axes mainAxis Alignment et crossAxis Alignment qui sont très importants.

Dans cette article on va voir deux autres propriétés qui sont justify-content et align-items, elles permettent de controler l'alignement des éléments enfants dans le conteneur flex.

Reprenons nos fichiers, on a un index.html contenant :

<div class="container">
  <div class="item item-1" style="background-color: #f00;"></div>
  <div class="item item-2" style="background-color: #0f0;"></div>
  <div class="item item-3" style="background-color: #00f;"></div>
  <div class="item item-4" style="background-color: #ff0;"></div>
  <div class="item item-5" style="background-color: #0ff;"></div>
</div>

et style.css contenant :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 700px;
  display: flex;
  flex-direction: row; /* qui est la valeur par défaut */
}

.item {
  width: 100px;
  height: 100px;
}

Ce qu'on va faire c'est de jouer avec les propriétés de justify-content pour voir son effet sur les éléments enfants.
Avant, faut savoir que justify-content peut plusieurs valeurs mais les plus courantes sont :

flex-start ( qui est la valeur par défaut )
flex-end
center
space-between
space-around
space-evenly

.container {
  height: 700px;
  display: flex;
  flex-direction: row; /* qui est la valeur par défaut */
  justify-content: flex-end;
}

Ce qu'on a fait c'est d'attribuer la valeur flex-end à la propriété justify-content et comme nous le voyons sur l'image ci-dessous, les éléments enfants sont alignés à l'extrémité droite du conteneur.

Après ceci on peut se dire automatiquement que flex-end aligne les éléments à l'extrémité droite, flex-start aligne les éléments à l'extrémité gauche et center aligne les éléments au centre.
Et c'est la où on se trompe,
J'ai parlé dans l'article précédent des axes mainAxis Alignment et crossAxis Alignment et c'est ici que ca devient important.
Vous devez savoir que :

justify-content agit sur l'axe principal ( mainAxis Alignment )

Donc techniquement,

align-items agit sur l'axe secondaire ( crossAxis Alignment )

Sauf toute fois oublier que :

Le sens de l'axe principal et de l'axe secondaire dépend de la valeur de flex-direction

Si c'est flou alors on va faire un petit rappel et aussi un petite correction de la partie 1 pour bien expliquer ceci une fois pour toute.

Ceci est un schéma qui montre comment les axes sont positionnés en fonction de la valeur de flex-direction si vous ne devez retenir qu'une seule chose de cet article c'est bien ca.

Avec ca, on peut revenir sur notre code et changer la valeur de flex-direction pour voir comment les éléments vont s'aligner.

.container {
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

Comme vous le voyez sur l'image ci-dessus, les éléments sont alignés en bas du conteneur et c'est parce que la valeur de flex-direction est column et donc l'axe principal est l'axe vertical.
et vu qu'on a mi flex-end comme valeur de justify-content les éléments sont alignés en bas ( l'extrémité de l'axe principal ).

Je pense que là maintenant ça commence à être clair pour vous,

Je vous conseille de toujours vous référer au schéma que je vous ai montré pour bien comprendre comment les éléments vont s'aligner.

Revenons donc sur notre code et voyons comment les autres valeurs de justify-content à savoir, space-between, space-around et space-evenly vont agir sur les éléments enfants car on a déjà vu flex-start, flex-end et center.

space-between : Les éléments sont répartis de manière égale sur l'axe principal avec un espace entre eux tout en touchant les extrémités du conteneur.

.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

space-around : Les éléments sont répartis de manière égale sur l'axe principal avec un espace entre eux et aussi un espace aux extrémités qui est la moitié de l'espace entre les éléments.

.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

space-evenly : Les éléments sont répartis de manière égale sur l'axe principal avec un espace entre eux et aussi un espace aux extrémités qui est égale à l'espace entre les éléments.

.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

Maintenant on va voir la propriété align-items qui permet de controler l'alignement des éléments enfants sur l'axe secondaire ( crossAxis Alignment ).
Je pense que vous avez déjà compris comment ca marche ( n'oubliez pas de toujours vous référer au schéma que je vous ai montré ) donc on va directement voir les valeurs de align-items qui sont :

flex-start
flex-end
center
stretch ( qui est la valeur par défaut )
baseline

On va comment par :

stretch : Les éléments enfants vont s'étirer pour toucher les extrémités du conteneur.

Cela est un comportement qu'actuellement qu'on voit pas actuellement car j'ai défini une hauteur fixe de 100px pour les éléments enfants.
ce qu'on va faire c'est de retirer la hauteur des éléments enfants pour voir comment stretch va agir.

.item {
  width: 100px;
  /* height: 100px; */
}

Comme vous le voyez sur l'image ci-dessus, les éléments enfants s'étirent pour toucher les extrémités du conteneur.

on va remettre la hauteur des éléments enfants et continuer,

flex-start : Les éléments enfants sont alignés à l'extrémité du conteneur, il y'a pas de différence avec justify-content: flex-start; si ce n'est que justify-content agit sur l'axe principal et align-items agit sur l'axe secondaire.
flex-end : Les éléments enfants sont alignés à l'extrémité opposée du conteneur, il y'a pas de différence avec justify-content: flex-end; si ce n'est que justify-content agit sur l'axe principal et align-items agit sur l'axe secondaire.
center : Les éléments enfants sont alignés au centre du conteneur, il y'a pas de différence avec justify-content: center; si ce n'est que justify-content agit sur l'axe principal et align-items agit sur l'axe secondaire.
baseline : Les éléments enfants sont alignés sur la ligne de base du conteneur, c'est un peu compliqué à expliquer mais c'est comme si les éléments étaient alignés sur une ligne imaginaire qui passe par la base des éléments.

Pour mieux explique cela on va donner des hauteurs différentes à 2 de nos éléments enfants.

.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.item {
  width: 100px;
  height: 100px;
}

.item-1 {
  height: 200px;
}

.item-3 {
  height: 300px;
}

Comme vous le voyez sur l'image ci-dessus, les éléments enfants sont alignés sur une ligne imaginaire qui passe par la base des éléments.
Je peux vous rassurer que c'est une valeur que vous n'utiliserez pas tous les jours mais c'est bien de la connaitre.

Avant, de vous quitter je vous rappelle de toujours vous référer au schéma que je vous ai montré pour bien comprendre comment les éléments vont s'aligner.

On est arrivé a la fin de cet article et j'espère qu'il vous a plu, si c'est le cas n'hésitez pas a partager sur vos réseaux et aussi a poser vos questions si vous n'avez pas très bien compris un point. On se dit donc au prochain article, ciao ! C'était LN 👋

Article précédent : Créer un curseur personnalisé
Article suivant : Grid Template Areas`