Comment maintenir des largeurs d'éléments flexibles cohérentes sur les lignes lors de l'emballage ?

Assurer que les articles flexibles emballés conservent la largeur des rangées précédentes

Dans un conteneur flexible, lorsque les articles flexibles sont emballés, ils ont tendance à occuper l'espace maximum autorisé, ce qui entraîne des largeurs divergentes. entre les éléments de différentes lignes. Pour résoudre ce problème, nous pouvons utiliser les astuces CSS suivantes :

Solution 1 : mixin personnalisé pour les éléments flexibles

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 sur l'élément flexible :

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

Solution 2 : Flex Container Mixin pour Requêtes d'éléments

Mixin :

@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 flexible :

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

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!