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> <style> * { box-sizing: border-box; } .flex-container { afficher: flex; flex-direction: row; } .flex-item { couleur de fond: #f1f1f1; padding: 10px; taille-de-police: 30px; text-align: center; largeur: 100%; } /* 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 (max-width: 600px) { .flex-container { flex-direction: colonne; } } </style> </head> <body> <h1>Flexbox réactif</h1> <p>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> <p><strong>Redimensionnez la fenêtre du navigateur pour voir l'effet.</strong></p> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> </body> </html>