Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Enregistrer le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } /* Conteneur pour les flexboxes */ .container { afficher: flex; flex-wrap: wrap; } /* Créer quatre colonnes égales */ .column { flex: 25%; padding: 20px; } /* Sur les écrans d'une largeur de 992px ou moins, passez de quatre colonnes à deux colonnes */ @media screen and (max-width: 992px) { .column { flex: 50%; } } /* Sur les écrans de 600px de large ou moins, faites en sorte que les colonnes s'empilent les unes sur les autres au lieu d'être côte à côte */ @media screen and (max-width: 600px) { .container { flex-direction: colonne; } } </style> </head> <body> <h2>Mise en page réactive à quatre colonnes</h2> <p><strong>Redimensionnez la fenêtre du navigateur pour voir l'effet.</strong></p> <p>Sur les écrans d'une largeur de 992px ou moins, les colonnes passeront de quatre colonnes à deux colonnes. Sur les écrans d'une largeur de 600px ou moins, les colonnes s'empileront les unes sur les autres au lieu d'être côte à côte.</p> <div class="container"> <div class="column" style="background-color:#aaa;"> <h2>Colonne 1</h2> <p>Certain texte..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Colonne 2</h2> <p>Certain texte..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Colonne 3</h2> <p>Certain texte..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Colonne 4</h2> <p>Certain texte..</p> </div> </div> </body> </html>