RM Partie 6 : Mise en page moderne (HTML + CSS)

Partie 6 — Mise en page moderne (HTML + CSS)

1) Objectifs pédagogiques

• expliquer et manipuler le modèle de boîte (content, padding, border, margin) ;
• distinguer bloc vs inline vs inline-block et leurs impacts ;
• construire des mises en page avec Flexbox (axes, alignements, gap, flex) ;
• comprendre les bases de CSS Grid pour des grilles réactives ;
• réaliser une page avec header, zone de contenu en 2 colonnes, footer, responsive.

2) Modèle de boîte (Box Model)

Chaque élément visuel (boîte) est composé de :

┌───────────────────────────────┐
│           margin              │  (extérieur, transparent)
│  ┌───────────────────────────┐│
│  │           border          ││
│  │  ┌─────────────────────┐  ││
│  │  │       padding       │  ││
│  │  │  ┌───────────────┐  │  ││
│  │  │  │    content    │  │  ││
│  │  │  └───────────────┘  │  ││
│  │  └─────────────────────┘  ││
│  └───────────────────────────┘│
└───────────────────────────────┘

• content : contenu (texte, image, etc.).
• padding : espace interne entre contenu et bordure.
• border : bordure.
• margin : espace externe de séparation entre boîtes.

2.1 Largeur/hauteur calculées

Par défaut (box-sizing: content-box) :

boîte totale = width + padding + border (+ margin à l’extérieur)

Bonne pratique moderne : appliquer box-sizing: border-box pour inclure padding et border dans width/height (calculs plus simples).

/* Recommandé pour tout le document */
*, *::before, *::after { box-sizing: border-box; }

2.2 Marges : cas particuliers

• Fusion des marges (margin collapsing) entre blocs verticaux : la marge verticale entre deux blocs est la plus grande des deux, pas la somme.

  • Se produit entre frères (haut/bas), entre parent sans padding/border et son premier/dernier enfant.
  • Ne se produit pas pour les flex items, grid items, ou si le parent a un padding/border/overflow non visible.

• margin: auto peut centrer horizontalement un bloc avec largeur définie :

.container { width: 60ch; margin: 0 auto; }

2.3 Divers

• outline (contour d’accessibilité) ne fait pas partie du box model.
• min-width, max-width, min-height, max-height contrôlent les bornes.
• overflow (visible|hidden|auto|scroll) gère le débordement.

3) Affichage : block vs inline vs inline-block

3.1 display: block

• Occupe toute la largeur disponible ; commence sur une nouvelle ligne.
• Accepte width/height, margin vertical/horizontal.
• Exemples : div, p, section, article, header, footer, ul, ol, li, h1…h6.

3.2 display: inline

• S’insère dans la ligne courante.
• Ignorer souvent width/height ; margin vertical peu ou pas pris en compte ; padding vertical affecte la ligne mais reste délicat.
• Exemples : span, a, em, strong, img (remplacé, mais rendu inline par défaut).

3.3 display: inline-block

• Comportement en ligne (s’aligne avec le texte) tout en acceptant width/height/margin/padding.
• Attention : un espace dans le HTML entre deux inline-block crée un interlettrage (petit espace visuel) ; à gérer en supprimant l’espace ou via CSS (font-size:0 sur le parent, etc.).
• Aujourd’hui, on préfère souvent Flex/Grid à inline-block pour la mise en page.

4) Introduction à Flexbox

4.1 Concepts

• display: flex transforme un élément en conteneur flex.
• Les enfants deviennent des flex items disposés selon un axe principal (main axis) et un axe transversal (cross axis).
• Par défaut : flex-direction: row → items de gauche à droite.

4.2 Propriétés du conteneur

.container {
  display: flex;
  flex-direction: row;   /* row | row-reverse | column | column-reverse */
  flex-wrap: nowrap;     /* nowrap | wrap | wrap-reverse */
  gap: 1rem;             /* espace entre items (mieux que margin pour l’écart) */
  justify-content: flex-start; /* aligne sur l'axe principal */
  align-items: stretch;        /* aligne sur l'axe transversal (pour une ligne) */
  align-content: normal;       /* multi-lignes uniquement */
}

• justify-content (axe principal) : flex-start | center | flex-end | space-between | space-around | space-evenly.
• align-items (axe transversal) : stretch | flex-start | center | flex-end | baseline.
• gap : espace intrinsèque entre items (évite les marges d’ajustement).

4.3 Propriétés des items

.item {
  flex: 0 1 auto;     /* = flex-grow flex-shrink flex-basis */
  align-self: auto;   /* écrase align-items pour l'item */
  order: 0;           /* ordre de rendu, 0 par défaut */
}

• flex-grow : capacité à grandir si espace libre (0 = ne grandit pas, 1 = peut grandir).

• flex-shrink : capacité à rétrécir si manque de place (1 = peut rétrécir).

• flex-basis : taille de base avant distribution (auto, 0, 200px, 30%, etc.).

• Shorthands utiles :

  • flex: 1; ≈ 1 1 0 → prend également l’espace disponible.
  • flex: 0 0 300px; → fixe une base à 300px, pas de croissance, pas de rétrécissement.

4.4 Patron 2 colonnes avec Flex

.main {
  display: flex;
  gap: 1rem;
}
.col-contenu { flex: 1 1 0; }         /* colonne fluide */
.col-aside   { flex: 0 0 320px; }     /* colonne latérale fixe */

• Responsive : passer en pile sous un seuil :

@media (max-width: 800px) {
  .main { flex-direction: column; }
  .col-aside { flex-basis: auto; } /* largeur auto en pile */
}

5) Aperçu de CSS Grid

5.1 Concepts

• display: grid crée une grille 2D (lignes + colonnes).
• Définis les pistes (tracks) via grid-template-columns et grid-template-rows.
• Les enfants deviennent des grid items positionnés automatiquement ou via lignes/aires.

5.2 Propriétés essentielles (conteneur)

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2 colonnes : principale + aside */
  gap: 1rem;                      /* espace entre cellules */
}

• Unités fr : parts de l’espace disponible.
• minmax(min, max) : bornes adaptatives.
• auto-fit / auto-fill : placement auto réactif.

Exemples :

/* 2 colonnes réactives, la colonne 1 ne descend jamais sous 320px */
.grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 320px;
  gap: 1rem;
}

/* Grille responsive en cartes, minimum 220px et sinon s'étire (auto-fit) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

5.3 Grid areas (aperçu)

.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
  gap: 1rem;
}
header { grid-area: header; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

Responsive :

@media (max-width: 800px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "aside"
      "footer";
  }
}

6) Exemples commentés

6.1 Gabarit global (avec border-box)

/* Base globale */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #222;
  background: #f7f9fc;
}

/* Utilitaire pour centrer et limiter la largeur */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
}

6.2 Layout 2 colonnes avec Flex

.header, .footer {
  background: #0b3d91; color: #fff;
  padding: 1rem;
}
.main {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
}
.col-contenu {
  flex: 1 1 0;
  background: #fff;
  padding: 1rem;
  border: 1px solid #e5e7eb;
}
.col-aside {
  flex: 0 0 320px;
  background: #fff;
  padding: 1rem;
  border: 1px solid #e5e7eb;
}
@media (max-width: 800px) {
  .main { flex-direction: column; }
  .col-aside { flex-basis: auto; }
}

6.3 Layout 2 colonnes avec Grid (alternative)

.layout-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
}
@media (max-width: 800px) {
  .layout-grid {
    grid-template-columns: 1fr;
  }
}

7) Pièges fréquents

• Oublier box-sizing: border-box; → calculs de largeur pénibles, débordements.
• Compter sur margin pour espacer des flex items → préfère gap.
• Utiliser inline en pensant pouvoir régler width/height → pas pris en compte.
• Croire que les marges verticales s’additionnent toujours → fusion des marges entre blocs.
• Fixer des largeurs rigides partout → manque de responsive. Préfère %, fr, flex, minmax.
• Empiler des order/flex-basis/width contradictoires → clarifie d’abord l’axe, puis le comportement (flex).

8) Exercice (énoncé)

But : Créer une page avec header, contenu en 2 colonnes, footer, responsive.

Consignes

1. Crée index.html avec un <header>, un <main> et un <footer>. Dans <main>, place deux colonnes :

   • une colonne de contenu (texte, titres, paragraphes) ;
   • une colonne latérale (aside) d’environ 320px.

2. Utilise une classe .container pour centrer le contenu (max-width + margin auto).

3. Réalise la mise en page en Flexbox :

   • .main → display: flex; gap: …
   • .col-contenu → colonne fluide
   • .col-aside → colonne fixe ~320px

4. Responsive : sous 800px, empile les colonnes (une seule colonne).

5. Bonus : propose une version Grid (facultatif) dans un second fichier CSS.

Arborescence

/index.html
/assets/css/style.css

9) Corrigé possible (Flexbox)

index.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Layout 2 colonnes — Flexbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>

    <header class="header">
      <div class="container">
        <h1>Mon site</h1>
        <p>Un sous-titre concis</p>
      </div>
    </header>

    <main class="container">
      <div class="main">
        <article class="col-contenu">
          <h2>Article principal</h2>
          <p>Texte de démonstration. Cette colonne est fluide et occupe
             tout l’espace disponible restant.</p>
          <h3>Sous-partie</h3>
          <p>Autre paragraphe pour vérifier les espacements et la lisibilité.</p>
        </article>

        <aside class="col-aside">
          <h2>À côté</h2>
          <p>Colonne latérale fixe (environ 320px) pour un sommaire,
             une publicité, un encadré, etc.</p>
        </aside>
      </div>
    </main>

    <footer class="footer">
      <div class="container">
        <p>© 2025 — Mon site</p>
      </div>
    </footer>

  </body>
</html>

assets/css/style.css

/* 1) Base et box model */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #222;
  background: #f7f9fc;
  line-height: 1.6;
}

/* 2) Conteneur centré */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
}

/* 3) En-tête et pied de page */
.header, .footer {
  background: #0b3d91;
  color: #fff;
}
.header h1 { margin: 0 0 .25rem; }
.header p  { margin: 0; }

/* 4) Zone principale en 2 colonnes (Flex) */
.main {
  display: flex;
  gap: 1rem;           /* espace entre colonnes */
  padding: 1rem 0;
}

.col-contenu,
.col-aside {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 1rem;
}

/* Colonne fluide */
.col-contenu { flex: 1 1 0; }

/* Colonne fixe ~320px */
.col-aside   { flex: 0 0 320px; }

/* 5) Responsive : pile en 1 colonne sous 800px */
@media (max-width: 800px) {
  .main { flex-direction: column; }
  .col-aside { flex-basis: auto; }
}

10) Variante (Grid) — optionnelle

assets/css/style-grid.css (extrait)

/* Base identique à la version flex */

.layout {
  display: grid;
  grid-template-columns: 1fr 320px; /* contenu + aside fixe */
  gap: 1rem;
  padding: 1rem 0;
}

@media (max-width: 800px) {
  .layout {
    grid-template-columns: 1fr;     /* une colonne */
  }
}

index.html (remplacer la div .main par .layout)

<main class="container">
  <div class="layout">
    <article class="col-contenu">…</article>
    <aside class="col-aside">…</aside>
  </div>
</main>

11) Mini-quiz

1. Que fait box-sizing: border-box et pourquoi est-ce recommandé ?
2. Différences clés entre block, inline et inline-block ?
3. Dans Flexbox, quel est l’axe principal par défaut ? Quelle propriété aligne le contenu sur cet axe ?
4. À quoi servent flex-grow, flex-shrink, flex-basis ? Donne un exemple de shorthand.
5. Pourquoi gap est préférable à des marges entre flex items ?
6. Donne une définition brève de fr, minmax(), auto-fit en Grid.

Corrigé bref

1. Inclut padding/border dans width/height → calculs simples, moins de débordements.
2. block prend toute la ligne ; inline s’insère dans la ligne (pas de width/height) ; inline-block se place en ligne tout en acceptant width/height.
3. Axe principal = horizontal (row) ; alignement = justify-content.
4. grow = grandir si place ; shrink = rétrécir si manque ; basis = taille de départ. Ex. flex: 1 1 0 ou flex: 0 0 320px.
5. gap gère l’espace intrinsèque (pas de collisions ou calculs de marges), plus simple et prévisible.
6. fr = part d’espace ; minmax(a,b) = piste bornée entre a et b ; auto-fit remplit la ligne avec le plus d’items possibles (reflow responsive).

12) Fiche-mémo

• Box model : content → padding → border → margin.

  • Recommandé : *,*::before,*::after { box-sizing: border-box; }
  • Marges verticales peuvent fusionner (pas en flex/grid).

• Display :

  • block (ligne entière, width/height OK),
  • inline (dans la ligne, width/height ignorés),
  • inline-block (en ligne + width/height OK).

• Flexbox :

  • Conteneur : display:flex; flex-direction; flex-wrap; gap; justify-content; align-items
  • Items : flex-grow; flex-shrink; flex-basis; flex; order; align-self
  • Patron 2 colonnes : flex:1 + flex:0 0 320px.

• Grid :

  • grid-template-columns/rows, gap, unités fr, minmax, auto-fit/auto-fill, grid-template-areas.

• Responsive : media queries, unités flexibles (%, fr), piles sous seuil.