À quoi sert flex en CSS?

Flexbox est utilisé pour créer des dispositions unidimensionnelles d’éléments dans un conteneur. Il permet de gérer l’alignement, la distribution de l’espace et l’ordre des éléments.

Concepts clés :

• Conteneur Flex : Élément parent auquel on attribue display: flex ou display: inline-flex.
• Éléments Flex : Éléments enfants du conteneur Flex.
• Axe Principal : Axe principal du conteneur Flex. Définie par la propriété flex-direction. Par défaut horizontal (row).
• Axe Croisé : Axe perpendiculaire à l’axe principal.

Propriétés clés pour le conteneur Flex :

• display : Définit que l’élément est un conteneur flex (flex ou inline-flex).
• flex-direction : Définit la direction de l’axe principal (row, row-reverse, column, column-reverse).
• justify-content : Aligne les éléments flex le long de l’axe principal (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items : Aligne les éléments flex le long de l’axe croisé (flex-start, flex-end, center, baseline, stretch).
• flex-wrap : Détermine si les éléments flex doivent passer à une nouvelle ligne/colonne en cas de manque d’espace (nowrap, wrap, wrap-reverse).

Propriétés clés pour les éléments flex :

• order : Définit l’ordre visuel de l’élément flex (par défaut 0).
• flex-grow : Détermine dans quelle mesure un élément flex peut croître par rapport aux autres (par défaut 0).
• flex-shrink : Détermine dans quelle mesure un élément flex peut rétrécir par rapport aux autres (par défaut 1).
• flex-basis : Définit la taille initiale de l’élément flex avant la distribution de l’espace libre (par défaut auto).
• align-self : Redéfinit l’alignement de l’élément flex le long de l’axe croisé pour un élément spécifique.

Exemple d’utilisation :

.container {
  display: flex;
  justify-content: center; /* Centrage le long de l’axe principal */
  align-items: center; /* Centrage le long de l’axe croisé */
  height: 200px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

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

Cela permet de centrer facilement les éléments, de créer des grilles adaptatives et de gérer l’espace entre les éléments.