Ce diaporama n’est pas le cours, il en donne la trame. Le cours complet est sur la page de la leçon.

Mise en page

Flexbox

Un conteneur qui range ses enfants

Comment placer un logo à gauche et un menu à droite ?

Un conteneur flexible

.menu {
    display: flex;
}
  • On règle le parent, pas les enfants.
  • Ses enfants directs se rangent sur une ligne.
  • Aucun espace parasite entre eux.

Répartir l’espace vide

.menu {
    display: flex;
    justify-content: space-between;
}
  • flex-start, center, flex-end
  • space-between, space-around

Changer de direction

.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

justify-content répartit alors la hauteur.

Avant Flexbox, c’était impossible.

Imbriquer des conteneurs

  • Un élément flexible peut être un conteneur flexible.
  • Chaque conteneur range ses propres enfants.
  • La barre : un logo et un nav, en space-between.
  • Le nav : trois liens, côte à côte.

Boîtes flexibles

tzi.fr/jeu-css-7

À vous

Reproduisez chaque dessin avec display: flex, justify-content et flex-direction.

Lancer le jeu

Pour aller plus loin : Flexbox Froggy

tzi.fr/jeu-css-8

À vous

Aidez les grenouilles à rejoindre leur nénuphar. Allez le plus loin possible.

Lancer le jeu

Pour aller plus loin : Flexbox Defense

tzi.fr/jeu-css-9

À vous

Placez vos tourelles avec Flexbox pour arrêter les ennemis.

Lancer le jeu

Mise en page

Flexbox

Un conteneur, l’espace vide qu’il répartit, et la direction dans laquelle il range.

Fermer
1 / 1