Comment obtenir des largeurs cohérentes pour les éléments flexibles emballés dans les mises en page Flexbox ?

Comment garantir une largeur constante des éléments flexibles enveloppés dans une mise en page Flexbox

Problème

Dans une mise en page flexbox, les éléments flexibles adhèrent généralement aux spécifications spécifiées largeurs minimales et maximales. Cependant, lorsque les éléments flexibles sont placés sur une nouvelle ligne, ils ont tendance à s'étendre pour occuper l'espace disponible, ce qui entraîne des largeurs incohérentes entre les éléments sur différentes lignes.

Solution

Bien qu'il n'y ait pas de solution directe à ce problème dans la spécification CSS, une solution de contournement peut être obtenue à l'aide de requêtes multimédias.

Mixin Approche

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 :

Appliquer le mixin à chaque élément flexible :

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

Explication

Ce mixin génère une série de médias requêtes basées sur la base flexible spécifiée des éléments flexibles. Chaque requête multimédia calcule la largeur maximale de l'élément flexible pour une largeur de fenêtre d'affichage donnée en divisant 100 % par le nombre d'éléments flexibles qui tiennent sur cette ligne.

Mixin mis à jour pour le contrôle basé sur les conteneurs

Dans certains cas, la largeur du conteneur flexible peut ne pas correspondre à la largeur de la fenêtre d'affichage. Pour résoudre ce problème, une version mise à jour du mixin peut être appliquée au conteneur flex à la place :

@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);
    }
  }
}

Utilisation :

Appliquer le mixin au conteneur flex :

.flex-container {
  @include flex-container-wrap-items(100px)
}

Exemple

Un exemple de CodePen modifié peut être trouvé ici :
http://codepen.io/anon/pen/aNVzoJ

Mises en garde

• Cette approche ne prend pas en charge des largeurs égales entre les éléments flexibles sur toutes les lignes.
• Si la largeur maximale de la fenêtre d'affichage est connue, elle doit être spécifiée pour éviter des requêtes multimédias excessives.

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!