Cours HTML/CSS débutant — Module 4 : Mise en page avec le Box Model et Flexbox

Module 4 : Mise en page avec le Box Model et Flexbox

Comprendre comment les éléments sont dimensionnés et positionnés est essentiel pour construire des mises en page.

Le Box Model

Chaque élément HTML est une boîte composée de :

• content : le contenu
• padding : l'espace intérieur
• border : la bordure
• margin : l'espace extérieur

.boite {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

Flexbox : aligner facilement des éléments

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

• justify-content gère l'alignement horizontal
• align-items gère l'alignement vertical

Exemple concret : une barre de navigation

<nav class="conteneur">
  <a href="#">Accueil</a>
  <a href="#">À propos</a>
  <a href="#">Contact</a>
</nav>

.conteneur {
  display: flex;
  justify-content: space-around;
  background-color: #222;
  padding: 15px;
}

.conteneur a {
  color: white;
  text-decoration: none;
}

Exercice pratique

Construisez une barre de navigation horizontale avec 4 liens, centrée, avec un fond coloré.

Prochain épisode (Module 5) : rendre son site responsive et bonnes pratiques finales.