Aller au contenu principal

Module CSS.5 – Layouts modernes (CRUCIAL)

Objectif​

Maîtriser les layouts modernes CSS : Display, Position, Flexbox (COMPLET) et Grid (COMPLET) pour créer des mises en page professionnelles et responsives.

Théorie​

Display​

display = Définit comment l'élément est affiché.

Valeurs principales :

display: block;        /* Bloc (largeur complète) */
display: inline;       /* Ligne (largeur contenu) */
display: inline-block; /* Ligne mais avec dimensions */
display: flex;         /* Flexbox */
display: grid;         /* Grid */
display: none;         /* Caché */

Position​

position = Définit le positionnement d'un élément.

static (défaut)​

Position normale dans le flux.

.element {
    position: static;
}

relative​

Position relative à sa position normale.

.element {
    position: relative;
    top: 10px;
    left: 20px;
}

Utilisation : Ajustements fins, contexte pour absolute.

absolute​

Position absolue par rapport au parent positionné.

.parent {
    position: relative; /* Contexte */
}

.enfant {
    position: absolute;
    top: 0;
    right: 0;
}

Utilisation : Overlays, menus déroulants, éléments flottants.

fixed​

Position fixe par rapport au viewport.

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

Utilisation : Headers fixes, modals.

sticky​

Position collante (fixe quand scroll).

.header {
    position: sticky;
    top: 0;
}

Utilisation : Headers qui restent visibles au scroll.

Flexbox (COMPLET)​

Flexbox = Layout flexible pour distribuer l'espace.

Container (parent)​

Activer Flexbox :

.container {
    display: flex;
}

Direction :

flex-direction: row;        /* Horizontal (défaut) */
flex-direction: row-reverse; /* Horizontal inversé */
flex-direction: column;      /* Vertical */
flex-direction: column-reverse; /* Vertical inversé */

Wrap :

flex-wrap: nowrap;  /* Pas de retour (défaut) */
flex-wrap: wrap;    /* Retour à la ligne */
flex-wrap: wrap-reverse; /* Retour inversé */

Shorthand :

flex-flow: row wrap; /* direction + wrap */

Alignement principal (justify-content) :

justify-content: flex-start;   /* Début */
justify-content: flex-end;     /* Fin */
justify-content: center;        /* Centre */
justify-content: space-between; /* Espace entre */
justify-content: space-around;  /* Espace autour */
justify-content: space-evenly;  /* Espace égal */

Alignement secondaire (align-items) :

align-items: stretch;    /* Étire (défaut) */
align-items: flex-start; /* Début */
align-items: flex-end;   /* Fin */
align-items: center;     /* Centre */
align-items: baseline;   /* Baseline */

Alignement des lignes (align-content) :

align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;

Items (enfants)​

Ordre :

order: 1; /* Ordre d'affichage */

Flex-grow :

flex-grow: 1; /* Prend l'espace disponible */
flex-grow: 2; /* Prend 2× plus d'espace */

Flex-shrink :

flex-shrink: 1; /* Peut rétrécir (défaut) */
flex-shrink: 0; /* Ne rétrécit pas */

Flex-basis :

flex-basis: 200px; /* Taille de base */
flex-basis: auto;   /* Taille du contenu */

Shorthand flex :

flex: 1;           /* flex-grow: 1, shrink: 1, basis: 0 */
flex: 0 1 auto;     /* grow, shrink, basis */
flex: 1 0 200px;    /* grow: 1, shrink: 0, basis: 200px */

Align-self :

align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;

Exemple complet :

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.item {
    flex: 1 0 200px; /* Prend l'espace, ne rétrécit pas, base 200px */
}

Grid (COMPLET)​

Grid = Layout en grille bidimensionnelle.

Container (parent)​

Activer Grid :

.container {
    display: grid;
}

Définir les colonnes :

grid-template-columns: 200px 200px 200px; /* 3 colonnes de 200px */
grid-template-columns: 1fr 2fr 1fr;       /* 3 colonnes (1:2:1) */
grid-template-columns: repeat(3, 1fr);    /* 3 colonnes égales */
grid-template-columns: 200px 1fr auto;   /* Mixte */

Définir les lignes :

grid-template-rows: 100px 200px 100px;
grid-template-rows: repeat(3, 1fr);

Shorthand :

grid-template: 
    "header header header" 100px
    "sidebar main aside" 1fr
    "footer footer footer" 50px
    / 200px 1fr 200px;

Gap (espacement) :

gap: 20px;           /* Tous les côtés */
row-gap: 20px;       /* Espacement vertical */
column-gap: 30px;    /* Espacement horizontal */
gap: 20px 30px;      /* row column */

Alignement :

justify-items: start;   /* Alignement horizontal des items */
justify-items: end;
justify-items: center;
justify-items: stretch; /* Défaut */

align-items: start;     /* Alignement vertical des items */
align-items: end;
align-items: center;
align-items: stretch;    /* Défaut */

justify-content: start; /* Alignement de la grille */
place-items: center;    /* justify + align */

Zones nommées (Grid Areas) :

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 100px 1fr 50px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

Items (enfants)​

Position dans la grille :

.item {
    grid-column: 1 / 3;     /* Colonnes 1 à 3 */
    grid-row: 1 / 2;        /* Ligne 1 */
    grid-column: span 2;    /* S'étend sur 2 colonnes */
    grid-row: span 2;       /* S'étend sur 2 lignes */
}

/* Shorthand */
grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */

Alignement individuel :

justify-self: start;
align-self: center;
place-self: center; /* justify + align */

Exemple complet :

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.item-1 {
    grid-column: 1 / -1; /* Toute la largeur */
}

.item-2 {
    grid-column: span 2; /* 2 colonnes */
}

Flexbox vs Grid​

Flexbox :

  • ✅ Layout unidimensionnel (ligne OU colonne)
  • ✅ Distribution d'espace
  • ✅ Alignement
  • ✅ Menu de navigation
  • ✅ Centrage vertical/horizontal

Grid :

  • ✅ Layout bidimensionnel (lignes ET colonnes)
  • ✅ Grilles complexes
  • ✅ Layouts de page complets
  • ✅ Zones nommées
  • ✅ Responsive avancé

Utiliser les deux : Flexbox pour les composants, Grid pour les layouts de page.

Exercices guidés​

Exercice 1 : Position​

Créez des éléments avec :

  • position: relative avec décalage
  • position: absolute dans un parent
  • position: fixed pour un header
  • position: sticky pour un menu

Exercice 2 : Flexbox de base​

Créez un container flex avec :

  • justify-content: space-between
  • align-items: center
  • Items avec flex: 1

Exercice 3 : Flexbox avancé​

Créez un layout flex avec :

  • flex-wrap: wrap
  • Items avec flex-grow et flex-shrink
  • align-content pour les lignes

Exercice 4 : Grid de base​

Créez un grid avec :

  • 3 colonnes égales (repeat(3, 1fr))
  • Gap de 20px
  • Items qui s'étendent sur plusieurs colonnes

Exercice 5 : Grid Areas​

Créez un layout de page avec Grid Areas :

  • Header
  • Sidebar
  • Main
  • Aside
  • Footer

❌ Erreurs fréquentes​

Erreur 1 : Confondre Flexbox et Grid​

❌ Mauvais :

/* Utiliser Grid pour un menu horizontal */
.menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

✅ Bon :

.menu {
    display: flex;
    justify-content: space-between;
}

Pourquoi : Flexbox pour 1D, Grid pour 2D.

Erreur 2 : Oublier le contexte pour absolute​

❌ Mauvais :

.enfant {
    position: absolute;
    top: 0;
    /* Positionné par rapport au body */
}

✅ Bon :

.parent {
    position: relative; /* Contexte */
}
.enfant {
    position: absolute;
    top: 0;
    /* Positionné par rapport au parent */
}

Pourquoi : absolute se positionne par rapport au parent positionné.

Erreur 3 : Flex sans flex-wrap​

❌ Mauvais :

.container {
    display: flex;
    /* Items ne reviennent pas à la ligne */
}

✅ Bon :

.container {
    display: flex;
    flex-wrap: wrap;
}

Pourquoi : Responsive nécessite wrap.

Erreur 4 : Grid sans gap​

❌ Mauvais :

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Pas d'espacement */
}

✅ Bon :

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Pourquoi : gap est plus simple que margin.

Erreur 5 : Oublier fr dans Grid​

❌ Mauvais :

grid-template-columns: 200px 200px 200px;
/* Pas flexible */

✅ Bon :

grid-template-columns: 200px 1fr 200px;
/* Flexible au milieu */

Pourquoi : fr = fraction de l'espace disponible (flexible).

🚀 Mini-projet​

Mission : Créer un layout de page complet

Créez une page avec :

Layout Grid :

  • Header (full width)
  • Sidebar (200px)
  • Main content (flexible)
  • Aside (200px)
  • Footer (full width)

Composants Flexbox :

  • Navigation horizontale dans le header
  • Cards dans le main avec flexbox
  • Footer avec colonnes flex

Position :

  • Header sticky
  • Bouton flottant (fixed)

Critères :

  • ✅ Grid pour le layout principal
  • ✅ Flexbox pour les composants
  • ✅ Position appropriée
  • ✅ Responsive (wrap, fr)
  • ✅ Gap/espacement cohérent

Objectif : Maîtriser Flexbox et Grid pour créer des layouts professionnels.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez Flexbox, Grid, Position et pouvez créer des layouts complexes.