Maison > interface Web > tutoriel CSS > Comment puis-je obtenir des articles flexibles de même largeur sur les rangées, même lors de l'emballage ?

Comment puis-je obtenir des articles flexibles de même largeur sur les rangées, même lors de l'emballage ?

Mary-Kate Olsen
Libérer: 2024-12-19 16:42:10
original
431 Les gens l'ont consulté

How Can I Achieve Equal Width Flex Items Across Rows, Even When Wrapping?

Éléments flexibles de largeur égale dans des conteneurs de taille variable

Flexbox permet des mises en page flexibles et réactives, mais il peut rencontrer des défis lors de la tentative de maintenance largeur égale entre les éléments flexibles après la fin de la liste.

Flexbox actuelle Limitations

Dans sa spécification actuelle, Flexbox ne dispose pas d'une solution native pour un alignement de largeur égale sur la dernière ligne. Cela est dû au fait que les éléments flexibles sont dimensionnés en fonction de l'espace disponible et que la dernière ligne peut avoir moins d'espace restant.

Solution alternative : disposition en grille

Grille La mise en page, une autre technique de mise en page CSS, offre une solution plus robuste à ce problème d'alignement. Les grilles permettent un dimensionnement et un positionnement explicites des éléments dans un conteneur :

Code CSS

1

2

3

4

5

6

7

8

9

10

11

12

.container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

  grid-auto-rows: 20px;

  grid-gap: 5px;

}

 

.item {

  background: yellow;

  text-align: center;

  border: 1px solid red;

}

Copier après la connexion

Explication

  • La propriété grid-template-columns définit la taille et le nombre de colonnes dans la grille (autant que le conteneur peut contenir, chacune avec une largeur minimale de 100px et une unité flexible de 1fr).
  • La propriété grid-auto-rows définit la hauteur des lignes (20px dans ce cas).
  • grid-gap spécifie le espace entre les éléments.

Cette configuration répartit efficacement la largeur disponible de manière égale entre les éléments flexibles, leur permettant de s'enrouler et de conserver leur taille égale même sur le dernier rangé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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal