Présentation - Valentin Brosseau

Mettre des éléments côte à côte

Utile pour des cas précis, pas pour la mise en page globale.

Un conteneur…

.conteneur {
  display: flex;
}

…et ses enfants directs se placent intelligemment.

flex-direction: row;    /* En ligne (défaut) */
flex-direction: column; /* En colonne */

flex-wrap: wrap;

Quand la place manque, on passe à la ligne.

Les axes suivent flex-direction.

C'est LE piège classique de Flexbox.

.enfant {
  flex: 1;   /* Prend l'espace disponible */
  order: 2;  /* Change l'ordre d'affichage */
}

.conteneur {
  display: flex;
  justify-content: center;
  align-items: center;
}

Horizontal et vertical 🎉

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Sans elle, rien ne fonctionne.

@media (max-width: 960px) {
  main {
    flex-direction: column;
  }
}

Des règles CSS conditionnées à la taille de l'écran.

@media print { /* L'impression */ }
@media (prefers-color-scheme: dark) { /* Le thème sombre */ }

Place au TP 🚀