Maîtriser les mises en page flexibles : CSS Flexbox VS Grid pour une conception réactive

Cet article explore diverses méthodes pour créer une liste de cartes réactive et distribuée horizontalement à l'aide de CSS Flexbox et Grid. Nous relèverons le défi consistant à maintenir une taille et un espacement de carte cohérents sur différentes tailles d'écran.

Table des matières

• Table des matières
• Le défi
• CSS Flexbox : une liste de cartes flexible
• Distribution uniforme des cartes avec flex-grow et flex-basis
• Grille CSS : une solution réactive
• Résumé

Le défi

Les composants d'une galerie ou d'une liste nécessitent souvent des cartes (articles, produits, images) pour s'adapter à la largeur du conteneur. Chaque carte doit être redimensionnée proportionnellement, en conservant une hauteur, une largeur et un espacement égaux. La mise en page doit être redistribuée de manière transparente sur différentes tailles d'écran.

Une structure HTML de base et un minimum de CSS pourraient initialement produire une distribution inégale des cartes :

CSS Flexbox : une liste de cartes flexible

Flexbox propose une approche simple. flex-wrap: wrap permet le retour à la ligne vers de nouvelles lignes et gap contrôle l'espacement :

.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

Cela donne un flux horizontal :

Cependant, la définition d'une largeur fixe pour .item (width: 100px;) empêche les cartes de s'étendre pour remplir l'espace disponible, laissant des espaces :

L'utilisation des propriétés justify-content (comme space-between, space-around, etc.) ne résout pas parfaitement le problème de distribution paire :

Distribution uniforme des cartes avec flex-grow et flex-basis

flex-basis définit la taille initiale de la carte, tandis que flex-grow: 1 (ou flex: 1) permet une croissance proportionnelle :

.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}

Cela améliore la distribution, mais la dernière carte peut encore s'étendre de manière inégale :

Grille CSS : une solution réactive

CSS Grid fournit une solution plus robuste. display: grid et gap sont utilisés de la même manière que Flexbox :

.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

Pour la réactivité, grid-template-columns avec auto-fit, minmax() et repeat() est la clé :

.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}

Cela crée une mise en page entièrement réactive :

Résumé

Flexbox et Grid offrent de puissantes capacités de mise en page. Flexbox excelle dans les mises en page unidimensionnelles, tandis que Grid brille pour le contrôle bidimensionnel. Le choix du bon outil dépend des exigences de conception spécifiques.

Bon codage ! ?

? Découvrez Vue 3 et TypeScript avec mon nouveau livre Learning Vue !

? Connectez-vous avec moi sur X | LinkedIn.

Vous aimez ce post ? Partagez-le! ?? ?

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!