Développement web avancé

Flexbox - CSS

2526 · Dekens Antoine

Flexbox ?

C'est une méthode de mise en page basé sur un principe d'axes. Les éléments peuvent être disposés en colonne ou en ligne. L'avantage principale est de pouvoir contrôler la taille des ces éléments de manière flexible.

Flexbox

Terminologie

On y retrouve le flex container, avec 2 axes principaux: main axis et cross axis et contient des flex items.

On ne parle pas d'axe horizontal ou vertical, car nous pouvons modifier l'orientation du containeur avec la propriété flex-direction.

Mise en place

Il nous faut un élément parent qui deviendra un flex container grâce à la propriété display: flex ou display: inline-flex, et des éléments enfants (= flex items). Ces enfants auront un comportement de type flexbox par défaut sans même devoir spécifier de propriété.

Un flex container n'a d'impact que sur ses éléments enfants directs.

<ul class="flex-container">
  <li class="flex-item"></li>
  <li class="flex-item">
    // La balise <p> ne sera pas conidéré
    // comme un flex item puisque plus
    // enfant direct du ul.flex-container
    <p>…</p>
  </li>
</ul>

.flex-container {
  display: flex; /* ou inline-flex */
}

Propriétés du flex container

Ces propriétés ne peuvent s'appliquer qu'aux éléments en display: flex; ou display: inline-flex;.

flex-direction

Défini l'orientation des flex items. Les valeurs possibles :

row (défaut)
row-reverse
column
column-reverse

L'attribut dir peut modifier le comportement des valeurs row et row-reverse.

flex-direction dir

gap

Gère l'espacement entre nos flex items. C'est une propriété raccourcie, soit on défini une valeur uniforme pour les colonnes et les lignes, soit on passe 2 valeurs (ligne puis colonne).

gap column-gap row-gap

.flex-container{
  display: flex;

  /* Espacement de 24px uniforme */
  gap: 24px;
  /* row-gap de 24px, et column-gap de 12px */
  gap: 24px 12px;
}

flex-wrap

Défini le retour à la ligne de nos flex items:

nowrap : pas de retour à la ligne (défaut)
wrap : retour à la ligne
wrap-reverse : retour à la ligne avec en inversant le cross-axis.

flex-direction peut influencer le comportement de wrap et wrap-reverse.

flex-wrap

justify-content

Défini comment l'espace disponible sur le main axis de notre flex container doit être réparti sur nos flex items.

flex-direction modifie l'orientation du main axis, et donc le comportement de justify-content.

flex-start : espace à la fin du main axis (défaut)
flex-end : espace au début du main axis
center : espaces aux extrémités du main axis
space-between : espaces uniformes entre les flex items
space-around : espaces autours des flex items
space-evenly : espaces uniformes autour et entre les flex items

justify-content

align-items

Défini l'alignement des flex items sur le cross axis.

stretch : étire à la taille du containeur
normal : agit comme stretch (défaut)
flex-start : aligne au début du cross axis
flex-end : aligne à la fin du cross axis
center : centre sur le cross axis
baseline : aligne les éléments sur la ligne de base (= sur texte)

align-items

align-content

Défini comment l'espace disponible sur le cross axis de notre flex container doit être réparti sur nos flex items.

flex-direction modifie l'orientation du cross axis, et donc le comportement de align-content.

stretch : étire à la taille du containeur
flex-start : espace à la fin du cross axis (défaut)
flex-end : espace au début du cross axis
center : espaces aux extrémités du cross axis
space-between : espaces uniformes entre les flex items
space-around : espaces autours des flex items
space-evenly : espaces uniformes autour et entre les flex items

align-content

Propriétés du flex item

Ces propriétés ne peuvent s'appliquer qu'aux enfants directs d'un élément en display: flex; ou display: inline-flex;.

order

Défini l'ordre dans lequel est placé le flex item dans le flux du containeur. L'ordre est croissant, et une valeur numérique entière qui peut être négative. Par défaut la valeur est 0.

Si plusieurs éléments ont la même valeur, l'ordre naturel dans l'HTML sera appliqué.

order

flex-grow

Défini le facteur d'expansion (nombre entier) d'un élément en prenant en compte sa taille initale (width, height, flex-basis). L'espace restant dans le flex container est alors appliqué à la taille de notre élément en prenant en compte la somme des autres flex items et de leur propre facteur.

La valeur par défaut est 0, ce qui signifie que l'élément ne doit pas adapter sa taille sur base du containeur.

flex-grow

flex-basis

Défini la taille de flexibilité utilisé par défaut pour la taille initiale d'un flex item.

auto : se base sur la taille naturelle ou les propriétés width/height (défaut)
valeur numérique (px, em, %, etc.)

Une valeur numérique rendra flex-basis prioritaire comparé à width (ou height si flex-direction: column).

flex-basis

flex-shrink

Défini le facteur de rétrécissement (nombre entier) d'un élément. Ne peut pas être négatif, et sa valeur par défaut est 1.

On peut définir min-width/min-height pour éviter qu'un élément ne rétrécisse en dessous d'une certaine taille.

flex-shrink

align-self

Défini l'alignement du flex item sur le cross axis. Cette propriété écrasera la valeur définie par align-items du flex container.

auto : basé sur align-items (défaut)
stretch : étire à la taille du containeur
flex-start : aligne au début du cross axis
flex-end : aligne à la fin du cross axis
center : centre sur le cross axis
baseline : aligne les éléments sur la ligne de base (= sur texte)

align-self

flex

Propriété raccourcie qui défini flex-grow, flex-shrink et flex-basis.

flex: {flex-grow} {flex-shrink} {flex-basis};

flex

.flex-item{
  /* Valeurs par défaut */
  flex: 0 1 auto;

  /* Équivaut à flex: 1 1 auto; */
  flex: auto;
}

Guides

CSS Flexbox Layout Guide

Un guide qui regroupe tout ce qu'il faut savoir sur les flexbox.

CSS Flexbox Layout Guide

Flexbox Froggy

Un petit jeu où on doit aider Froggy et ses amis les grenouilles en écrivant du CSS dans le but de s'entrainer avec la technique flexbox.

Flexbox Froggy