Maison >interface Web >tutoriel CSS >Comment puis-je créer une grille de carrés réactive à l'aide de CSS Grid et Flexbox ?
Comment puis-je créer une grille de carrés réactive à l'aide de CSS Grid et Flexbox ?
- DDDoriginal
- 2024-11-26 11:29:10829parcourir
Grilles CSS avec Flexbox pour des carrés réactifs
La création d'une grille réactive de carrés à l'aide de CSS Grid et Flexbox peut être réalisée en comprenant les principes clés et en les appliquant efficacement.
Méthodologie :
- Utilisez Flexbox pour la distribution horizontale : Flexbox offre la flexibilité de distribuer les carrés horizontalement tout en conservant leur largeur. Ajustez la largeur des carrés à l'aide de flex ou min-width.
- Définir le rapport d'aspect carré : Pour vous assurer que les éléments sont carrés, ajoutez un rapport d'aspect : 1 / 1 au style des carrés. Cette propriété garantit que la largeur et la hauteur restent dans un rapport constant de 1:1.
- Définir la hauteur sur Auto : Contrairement à la largeur, la hauteur du les carrés doivent être réglés sur auto. Cela permet aux carrés d'être mis à l'échelle verticalement sans déformer leur rapport hauteur/largeur.
- Utilisez Flexbox pour le redimensionnement en hauteur : À mesure que les carrés évoluent verticalement, vous remarquerez peut-être des espaces. entre eux. Pour les éliminer, ajoutez align-items: stretch au conteneur parent, en vous assurant que les carrés s'étirent pour remplir l'espace vertical disponible.
Implémentation du code :
Voici un exemple de code révisé intégrant ces principes :
display: flex;<br> justifier-content: espace-autour;<br> align-content: stretch;<br>}<br>.flex-item {<br> arrière-plan : tomate;<br> marge : 5px;<br> couleur : blanc;<br> police-weight : gras;<br> taille de la police : 1,5em;<br> alignement du texte : centre;<br> flex : 1 0 auto;<br> rapport d'aspect : 1 / 1 ;<br> hauteur : auto ;<br>}<br><div class="flex-item">1</div><br> <div> <div class="flex-item">3</div><br> <div> <div class= "élément-flex">5</div><br> <div> <div class="flex-item">7</div><br></div>
”
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment puis-je répertorier par programmation les polices disponibles dans le navigateur en JavaScript ?Article suivant：Comment puis-je répertorier par programmation les polices disponibles dans le navigateur en JavaScript ?