Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Sauvegarder 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 { affichage: flex; flex-wrap: wrap; } .flex-item { couleur-de-fond: #f1f1f1; padding: 10px; text-align: center; taille-de-police: 30px; flex: 33.3%; } /* Sur les écrans d'une largeur de 600px 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-item { flex: 100%; } } </style> </head> <body> <h1>Flexbox réactif</h1> <p>Dans cet exemple, nous changeons le pourcentage de flex pour créer différentes mises en page pour différentes tailles d'écran.</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>