Comment maintenir une largeur uniforme des éléments flexibles après leur emballage dans Flexbox ?

Comment maintenir une largeur uniforme d'articles flexibles après l'emballage

Flexbox offre la possibilité de créer des mises en page flexibles, mais lorsqu'il s'agit d'emballer des articles flexibles, leurs largeurs peuvent varient considérablement. Pour résoudre ce problème, examinons une solution de contournement intelligente utilisant les requêtes multimédias CSS.

La solution

Bien qu'elle ne soit pas strictement une solution, l'approche suivante fournit une alternative élégante en utilisant requêtes multimédias et sans recourir à JavaScript.

SCSS 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

Appliquez le mixin à votre article flexible :

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

Alternative avancée

Si la largeur de votre conteneur flexible n'est pas limitée à la taille de la fenêtre d'affichage, vous peut utiliser des requêtes d'éléments au lieu des requêtes multimédias du navigateur. Voici un mixin pour le conteneur flexible :

@mixin flex-container-wrap-items($flex-basis, $max-expected-width: 2000px) {
  display: flex;
  flex-wrap: wrap;
  > * {
    max-width: 100%;
    flex-grow: 1;
    flex-basis: $flex-basis;
  }
  $multiplier: 1;
  $current-width: 0px;
  @while $current-width < $max-expected-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;
    &[min-width~="#{$flex-basis * $multiplier}"] > * {
      max-width: percentage(1/$multiplier);
    }
  }
}

Explication

Pour chaque base flexible spécifiée, nous calculons le nombre maximum d'éléments par ligne en fonction de la fenêtre d'affichage. largeur. Nous créons ensuite des requêtes multimédias pour restreindre la largeur maximale de l'élément en pourcentage de la largeur de la fenêtre d'affichage.

Exemple

Découvrez le CodePen mis à jour ci-dessous :

https://codepen.io/anon/pen/aNVzoJ

Cela montre comment les éléments flexibles maintiennent leur largeur souhaitée après emballage, assurant une disposition cohérente.

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!