Flex, Texte & Unités CSS

Objectif de la semaine : comprendre flexbox et les unités CSS.

Méthode recommandée : identifie l'axe principal puis ajuste justify-content et align-items. Avancez par petites étapes et testez chaque changement immédiatement.

/* Les valeurs les plus courantes de display */

display: block;        /* nouvelle ligne, pleine largeur */
display: inline;       /* dans le texte, pas de width/height */
display: inline-block; /* dans le texte, accepte width/height */
display: flex;         /* conteneur flexbox */
display: inline-flex;  /* flex, mais se comporte comme inline */
display: grid;         /* conteneur grid */
display: inline-grid;  /* grid, mais inline */
display: none;         /* masque complètement (retiré du flux) */

/* Comparaison none vs visibility: hidden */
.masque   { display: none; }           /* retiré, ne prend pas de place */
.invisible{ visibility: hidden; }      /* transparent, mais prend sa place */

display: flex sur le parent transforme les enfants directs en flex items. Les propriétés suivantes s'appliquent au conteneur.

.conteneur {
  display: flex;

  /* Direction de l'axe principal */
  flex-direction: row;           /* → (défaut) */
  flex-direction: row-reverse;   /* ← */
  flex-direction: column;        /* ↓ */
  flex-direction: column-reverse;/* ↑ */

  /* Alignement sur l'axe principal (→ si row) */
  justify-content: flex-start;   /* défaut — items à gauche */
  justify-content: flex-end;     /* items à droite */
  justify-content: center;       /* items centrés */
  justify-content: space-between;/* 1er et dernier aux bords */
  justify-content: space-around; /* marges autour de chaque item */
  justify-content: space-evenly; /* espaces exactement égaux */

  /* Alignement sur l'axe croisé (↕ si row) */
  align-items: stretch;    /* défaut — étire à la hauteur du conteneur */
  align-items: flex-start; /* aligne en haut */
  align-items: center;     /* aligne au centre */
  align-items: flex-end;   /* aligne en bas */
  align-items: baseline;   /* aligne sur la ligne de base du texte */

  /* Retour à la ligne */
  flex-wrap: nowrap;   /* défaut — tout sur une ligne */
  flex-wrap: wrap;     /* passe à la ligne si débordement */

  /* Espacement entre les items */
  gap: 1rem;           /* entre rangées et colonnes */
  gap: 1rem 2rem;      /* row-gap  column-gap */
}

Ces propriétés s'appliquent sur les enfants directs du conteneur flex.

.item {
  /* Capacité à grossir pour remplir l'espace disponible */
  flex-grow: 0;   /* défaut — ne grossit pas */
  flex-grow: 1;   /* grossit proportionnellement */
  flex-grow: 2;   /* grossit 2× plus qu'un item avec flex-grow:1 */

  /* Capacité à rétrécir si manque d'espace */
  flex-shrink: 1; /* défaut — rétrécit si nécessaire */
  flex-shrink: 0; /* ne rétrécit jamais (conserve flex-basis) */

  /* Taille de départ avant distribution de l'espace */
  flex-basis: auto;    /* défaut */
  flex-basis: 200px;   /* taille fixe */
  flex-basis: 30%;     /* en pourcentage */

  /* Raccourci : grow shrink basis */
  flex: 1;           /* 1 1 0% — croît et rétrécit librement */
  flex: 0 0 200px;   /* taille fixe, ne change pas */
  flex: 1 1 auto;    /* s'adapte à partir de sa taille naturelle */

  /* Ordre d'affichage (sans modifier le HTML) */
  order: 0;   /* défaut */
  order: -1;  /* passe en premier */
  order: 2;   /* passe en dernier */

  /* Alignement individuel (remplace align-items du parent) */
  align-self: auto;       /* hérite du parent */
  align-self: center;
  align-self: flex-end;
  align-self: stretch;
}

/* Astuce : margin-left: auto pousse l'item à droite */
.nav-bouton { margin-left: auto; }

Opacity

/* opacity : de 0 (transparent) à 1 (opaque) */
.transparent { opacity: 0; }
.semi-transp  { opacity: 0.5; }
.visible      { opacity: 1; }  /* défaut */

/* Au survol : effet de fondu */
.carte {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.carte:hover { opacity: 1; }

/* Attention : opacity affecte TOUT l'élément et ses enfants.
   Pour un fond transparent seulement, utilisez rgba() : */
.fond-transparent { background-color: rgba(0, 0, 0, 0.3); }

Box Shadow — ombre de boîte

/* Syntaxe : offset-x  offset-y  blur  spread  couleur */
.carte {
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15);
  /* 2px droite, 4px bas, 8px flou, pas d'expansion */
}

/* Ombre plus prononcée */
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);

/* Ombre intérieure (inset) */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

/* Ombre colorée */
box-shadow: 4px 4px 0 #264de4;  /* style "rétro" */

/* Plusieurs ombres (séparées par des virgules) */
box-shadow: 0 2px 4px rgba(0,0,0,.1),
            0 8px 20px rgba(0,0,0,.06);

Text Shadow — ombre de texte

/* Syntaxe : offset-x  offset-y  blur  couleur */
h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

/* Effet néon */
.neon {
  color: #00ff88;
  text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
}

/* Ombre blanche (lisibilité sur image) */
.titre-sur-image {
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* Exemples pratiques */
html { font-size: 16px; }   /* base pour rem */

body  { font-size: 1rem; }  /* 16px */
h1    { font-size: 2rem; }  /* 32px */
small { font-size: 0.875rem; } /* 14px */

.hero {
  width: 100vw;    /* pleine largeur de la fenêtre */
  height: 100vh;   /* pleine hauteur de la fenêtre */
}

.container {
  width: 90%;          /* 90% du parent */
  max-width: 1200px;   /* mais pas plus de 1200px */
  margin: 0 auto;      /* centré horizontalement */
}

/* Taille fluide avec clamp(min, idéal, max) */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

/* Raccourcis dans l'ordre : HAUT  DROITE  BAS  GAUCHE (sens horaire) */

padding: 20px;                  /* 4 côtés égaux */
padding: 10px 20px;             /* haut/bas=10  gauche/droite=20 */
padding: 10px 20px 15px;        /* haut=10  gauche/droite=20  bas=15 */
padding: 10px 20px 15px 5px;    /* haut=10  droite=20  bas=15  gauche=5 */

/* Propriétés individuelles */
padding-top:    10px;
padding-right:  20px;
padding-bottom: 15px;
padding-left:   5px;

/* Même logique pour margin */
margin: 0 auto;                 /* centrage horizontal (top/bottom=0) */
margin: 1rem 0;                 /* haut/bas=1rem, gauche/droite=0 */

/* Moyen mnémotechnique : TRouBLe (Top Right Bottom Left) */

Gras, italique, décorations

/* Gras */
font-weight: bold;     /* ou 700 */
font-weight: normal;   /* ou 400 */
font-weight: 100;      /* très fin — 100 à 900 */

/* Italique */
font-style: italic;
font-style: normal;

/* Soulignement et autres décorations */
text-decoration: underline;          /* souligné */
text-decoration: line-through;       /* barré */
text-decoration: overline;           /* surligné (au-dessus) */
text-decoration: none;               /* retire la décoration (ex. liens) */
text-decoration: underline dotted red; /* couleur + style */

Taille et famille de police

/* Taille */
font-size: 16px;    /* valeur absolue */
font-size: 1.25rem; /* relative à la base (20px si base=16px) */
font-size: 120%;    /* relative au parent */

/* Famille de polices (font-family) */
font-family: Arial, sans-serif;

/* Pile de polices avec fallback :
   1re police tentée → 2e si absente → catégorie générique */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family: Georgia, 'Times New Roman', Times, serif;
font-family: 'Courier New', Courier, monospace;

/* Catégories génériques (toujours disponibles) */
font-family: serif;      /* avec empattements (Times…) */
font-family: sans-serif; /* sans empattements (Arial…) */
font-family: monospace;  /* largeur fixe (Courier…) */
font-family: cursive;    /* manuscrite */

Espacement, alignement, transformation

line-height: 1.6;           /* hauteur de ligne (sans unité = × font-size) */
letter-spacing: .05em;      /* espacement entre lettres */
word-spacing: .2em;         /* espacement entre mots */

text-align: left;           /* défaut pour LTR */
text-align: center;
text-align: right;
text-align: justify;

text-transform: uppercase;  /* MAJUSCULES */
text-transform: lowercase;  /* minuscules */
text-transform: capitalize; /* Première Lettre En Majuscule */

text-indent: 2em;           /* retrait de première ligne */

/* Surlignage via color sur le span ou le ::selection */
.surligne { background-color: yellow; color: black; }

Créez une mise en page responsive orientée Flexbox.

1. Construisez une grille de cartes avec display:flex, gap et flex-wrap.
2. Appliquez différentes unités (px, rem, %, vw) dans vos styles.
3. Ajoutez des effets visuels : opacity, box-shadow et styles de texte.

Les questions sont cachées par défaut. Clique sur « Commencer le quiz » pour débuter.