Comment puis-je conserver une largeur uniforme pour les éléments flexibles enveloppés à l'aide de requêtes multimédias ?

Maintenir une largeur uniforme pour les éléments flexibles emballés

Lors de l'utilisation d'une boîte flexible pour afficher une série d'éléments, il peut être souhaitable de conserver une largeur uniforme pour les éléments, même lorsqu'ils s'enroulent sur plusieurs lignes. Traditionnellement, cela pose un défi, en particulier lorsque la largeur de l'élément se situe dans une plage spécifiée à l'aide de min-width et max-width.

Cet article présente une solution de contournement non conventionnelle mais efficace qui utilise des requêtes multimédias pour obtenir l'effet souhaité. .

Mixin (SCSS)

@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

Pour appliquer la solution de contournement, appliquez simplement le mixin à votre élément flexible :

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

Explication

Nous créons des media queries pour définir la largeur maximale des éléments en fonction de la largeur de la fenêtre du navigateur. Par exemple, si chaque élément doit avoir une largeur maximale de 100 px, nous créons des requêtes multimédias pour des largeurs de navigateur allant de 100 px à 600 px, en veillant à ce que la largeur de l'élément s'adapte de manière appropriée aux différentes tailles de navigateur.

En implémentant ce mixin, les éléments flexibles enveloppés conserveront leur largeur définie tout en restant dans les contraintes spécifiées. Il est important de noter que la largeur du conteneur flexible doit correspondre à la taille de la fenêtre d'affichage pour éviter les écarts.

De plus, la mise à jour fournie permet d'appliquer la solution de contournement au conteneur flexible, garantissant ainsi un emballage correct des éléments et le maintien de la largeur, indépendamment de largeur du conteneur flexible.

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!