Grid et Flexbox sont tous deux de puissants systèmes de mise en page en CSS, chacun conçu pour différents types de tâches de mise en page. Voici une comparaison des deux, ainsi que des exemples pour illustrer leurs différences :
Objectif :
Flexbox est conçu pour les mises en page unidimensionnelles. Il gère l'alignement et l'espacement des éléments le long d'un seul axe (ligne ou colonne).
Caractéristiques principales :
Exemple :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Example</title> <style> .container { display: flex; justify-content: space-between; /* Distributes space between items */ align-items: center; /* Aligns items vertically in the center */ height: 100vh; background-color: lightgrey; } .item { background-color: dodgerblue; color: white; padding: 20px; text-align: center; flex: 1; /* Makes items flexible */ margin: 10px; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> </body> </html>
Caractéristiques illustrées :
Objectif :
Grid est conçu pour les mises en page bidimensionnelles. Il gère simultanément les lignes et les colonnes, permettant des mises en page complexes.
Caractéristiques principales :
Exemple :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid Example</title> <style> .container { display: grid; grid-template-columns: repeat(3, 1fr); /* Creates three equal-width columns */ grid-gap: 10px; /* Adds space between grid items */ height: 100vh; background-color: lightgrey; } .item { background-color: dodgerblue; color: white; padding: 20px; text-align: center; } .item:nth-child(2) { grid-column: span 2; /* Makes the second item span two columns */ } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> </body> </html>
Caractéristiques illustrées :
Le choix entre Flexbox et Grid dépend de la complexité de votre mise en page et si vous avez besoin d'un contrôle unidimensionnel ou bidimensionnel. Souvent, les deux peuvent être utilisés ensemble pour obtenir la disposition souhaitée.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!