Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html lang="en">
<head>
<title>Modèle CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
police: Arial, Helvetica, sans-serif;
}

/* Styliser l'en-tête */
.header {
couleur-de-fond: #f1f1f1;
padding: 30px;
text-align: center;
taille-de-police: 35px;
}

/* Conteneur pour les flexboxes */
.row {
display: -webkit-flex;
afficher: flex;
}

/* Créez trois colonnes égales qui se trouvent côte à côte */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
height: 300px; /* Devrait être supprimé. Seulement pour démonstration */
}

/* Styliser le pied de page */
.footer {
couleur-de-fond: #f1f1f1;
padding: 10px;
text-align: center;
}

/* Mise en page responsive - fait empiler les trois colonnes les unes sur les autres au lieu de les placer côte à côte */
@media (max-width: 600px) {
.row {
-webkit-flex-direction: colonne;
flex-direction: colonne;
}
}
</style>
</head>
<body>

<h2>Modèle CSS utilisant Flexbox</h2>
<p>Dans cet exemple, nous avons créé un en-tête, trois colonnes égales et un pied de page. Sur les écrans plus petits, les colonnes s'empileront les unes sur les autres.</p>
<p>Redimensionnez la fenêtre du navigateur pour voir l'effet réactif.</p>
<p><strong>Remarque :</strong>Flexbox n'est pas pris en charge dans Internet Explorer 10 et les versions antérieures.</p>

<div class="row">
  <div class="column" style="background-color:#aaa;">Colonne</div>
  <div class="column" style="background-color:#bbb;">Colonne</div>
  <div class="column" style="background-color:#ccc;">Colonne</div>
</div>

</body>

</html>