Comment maintenir une largeur d'élément cohérente dans les mises en page Flexbox après l'emballage ?

Maintenir une largeur d'élément uniforme après l'emballage de la Flexbox

Dans les mises en page Flexbox, maintenir une largeur d'élément cohérente sur plusieurs lignes peut être difficile. Cependant, cela peut être réalisé grâce à une combinaison de propriétés CSS, comme décrit ci-dessous :

Propriétés CSS

flex-grow

Définit le facteur de croissance d'un élément par rapport à d'autres articles. En définissant ceci sur 1, chaque élément a un potentiel de croissance égal.

flex-basis

Définit la taille initiale d'un élément. Ceci détermine la largeur minimale de l'élément.

max-width

Définit la largeur maximale d'un élément, en s'assurant qu'il ne dépasse pas la taille souhaitée.

Médias CSS Requêtes

Les requêtes multimédias sont utilisées pour ajuster la propriété max-width en fonction de la taille de la fenêtre d'affichage, en maintenant ainsi la cohérence de la largeur des éléments sur plusieurs lignes.

Exemple

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  max-width: 100px;
  flex: 1 0 0;
}

@media (min-width: 200px) {
  li {
    max-width: 50%;
  }
}

@media (min-width: 300px) {
  li {
    max-width: 33.33333%;
  }
}

Explication

Ce CSS définit la largeur initiale de chaque élément à 100px. Il utilise ensuite des requêtes multimédias pour ajuster la propriété max-width à mesure que la taille de la fenêtre d'affichage change, garantissant ainsi que les éléments conservent la largeur souhaitée même lorsqu'ils passent à une nouvelle ligne.

Solution alternative

Flex -Wrap-Fix Mixin

Une alternative plus élégante consiste à utiliser le flex-wrap-fix mixin :

@mixin flex-wrap-fix($flex-basis, $max-viewport-width: 2000px) {
  flex-grow: 1;
  flex-basis: $flex-basis;
  max-width: 100%;

  $multiplier: 1;
  $current-width: 0px;

  @while $current-width < $max-viewport-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;

    @media(min-width: $flex-basis * $multiplier) {
      max-width: percentage(1/$multiplier);
    }
  }
}

Utilisation

Appliquer le mixin à l'élément flex :

.flex-item {
  @include flex-wrap-fix(100px)
}

Ce mixin obtient le même résultat que les requêtes multimédias CSS mais élimine le besoin pour le code répétitif et facilite la maintenance.

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!