Layout & Flexbox

<div class="block">       <!-- Display: block (défaut pour div) -->
<span class="inline">     <!-- Display: inline -->
<div class="inline-block"> <!-- Display: inline-block -->
<div class="flex">         <!-- Display: flex 🌟 -->
<div class="grid">         <!-- Display: grid 🌟 -->
<div class="hidden">       <!-- Display: none (caché) -->
<div class="inline-flex">  <!-- Display: inline-flex -->

<!-- Direction -->
<div class="flex">             <!-- Ligne (défaut) -->
<div class="flex flex-col">    <!-- Colonne -->
<div class="flex flex-row-reverse">  <!-- Ligne inversée -->

<!-- Alignement horizontal (justify) -->
<div class="flex justify-start">     <!-- À gauche -->
<div class="flex justify-center">    <!-- Centré -->
<div class="flex justify-end">       <!-- À droite -->
<div class="flex justify-between">   <!-- Espacé entre -->
<div class="flex justify-around">    <!-- Espacé autour -->

<!-- Alignement vertical (items) -->
<div class="flex items-start">       <!-- En haut -->
<div class="flex items-center">      <!-- Centré verticalement -->
<div class="flex items-end">         <!-- En bas -->
<div class="flex items-stretch">     <!-- Étiré (défaut) -->

<!-- Le combo magique : centrer horizontalement ET verticalement -->
<div class="flex items-center justify-center">
  <p>Je suis parfaitement centré !</p>
</div>

<!-- Gap uniforme -->
<div class="flex gap-4">        <!-- 16px entre chaque enfant -->

<!-- Gap horizontal et vertical séparés -->
<div class="flex gap-x-4 gap-y-2">

<!-- Exemple concret : barre de navigation -->
<nav class="flex items-center gap-6">
  <a href="/">Accueil</a>
  <a href="/cours">Cours</a>
  <a href="/blog">Blog</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Avant gap, on faisait ça (horrible) :
  <a class="mr-6">Accueil</a>
  <a class="mr-6">Cours</a>
  ...le dernier n'a pas besoin de mr-6... galère !
-->

<!-- flex-1 : prend tout l'espace disponible -->
<div class="flex gap-4">
  <aside class="w-64">Sidebar fixe (256px)</aside>
  <main class="flex-1">Contenu qui prend le reste</main>
</div>

<!-- flex-none : ne rétrécit jamais -->
<div class="flex gap-4">
  <img class="flex-none w-16 h-16" src="avatar.jpg" />
  <div class="flex-1">
    <h3>Nom Utilisateur</h3>
    <p>Description qui peut être longue...</p>
  </div>
</div>

<!-- flex-shrink-0 : empêche le rétrécissement -->
<div class="flex">
  <div class="shrink-0 w-20">Ne rétrécit pas</div>
  <div class="flex-1 min-w-0 truncate">
    Texte très long qui sera tronqué...
  </div>
</div>

<!-- Grille basique -->
<div class="grid grid-cols-3 gap-4">
  <div>Colonne 1</div>
  <div>Colonne 2</div>
  <div>Colonne 3</div>
</div>

<!-- Colonnes de tailles différentes -->
<div class="grid grid-cols-4 gap-4">
  <aside class="col-span-1">Sidebar</aside>
  <main class="col-span-3">Contenu principal</main>
</div>

<!-- Grille auto-responsive (sans media queries !) -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6">
  <div>Carte 1</div>
  <div>Carte 2</div>
  <div>Carte 3</div>
  <div>Carte 4</div>
  <!-- S'adapte automatiquement : 4 colonnes → 2 → 1 -->
</div>

<!-- Lignes -->
<div class="grid grid-rows-3 gap-4 h-screen">
  <header>Header</header>
  <main class="row-span-1">Contenu</main>
  <footer>Footer</footer>
</div>

<!-- Position -->
<div class="relative">     <!-- position: relative -->
<div class="absolute">     <!-- position: absolute -->
<div class="fixed">        <!-- position: fixed -->
<div class="sticky top-0"> <!-- position: sticky; top: 0 -->

<!-- Placement (avec absolute/fixed) -->
<div class="absolute top-0 right-0">     En haut à droite
<div class="absolute bottom-4 left-4">   En bas à gauche + offset
<div class="absolute inset-0">           Couvre tout le parent
<div class="absolute inset-x-0 bottom-0"> Barre en bas

<!-- Exemple : Badge sur un avatar -->
<div class="relative inline-block">
  <img class="size-12 rounded-full" src="avatar.jpg" />
  <span class="absolute -top-1 -right-1 size-4 bg-green-500
               rounded-full border-2 border-white">
  </span>
</div>

<!-- z-index -->
<div class="z-10">  <!-- z-index: 10 -->
<div class="z-50">  <!-- z-index: 50 -->

<!-- Layout classique Header/Content/Footer -->
<div class="min-h-screen flex flex-col">
  <!-- Header sticky -->
  <header class="sticky top-0 z-50 bg-white/80 backdrop-blur-sm
                 border-b border-slate-200">
    <nav class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
      <a class="text-xl font-bold">MonSite</a>
      <div class="flex items-center gap-6">
        <a>Cours</a>
        <a>Blog</a>
        <button class="bg-sky-500 text-white px-4 py-2 rounded-lg">
          S'inscrire
        </button>
      </div>
    </nav>
  </header>

  <!-- Contenu avec sidebar -->
  <div class="flex-1 max-w-6xl mx-auto w-full px-4 py-8">
    <div class="flex gap-8">
      <aside class="hidden lg:block w-64 shrink-0">
        Sidebar (cachée sur mobile)
      </aside>
      <main class="flex-1 min-w-0">
        Contenu principal
      </main>
    </div>
  </div>

  <!-- Footer -->
  <footer class="bg-slate-900 text-slate-400 py-8">
    <div class="max-w-6xl mx-auto px-4 text-center">
      © 2026 MonSite
    </div>
  </footer>
</div>