Wie kann ich beim Umbrechen konsistente Flex-Elementbreiten über Zeilen hinweg beibehalten?

Sicherstellen, dass umwickelte Flex-Elemente die vorherigen Zeilenbreiten beibehalten

In einem Flex-Container nehmen flexible Elemente beim Umwickeln tendenziell den maximal zulässigen Platz ein, was zu unterschiedlichen Breiten führt zwischen Elementen in verschiedenen Zeilen. Um dieses Problem anzugehen, können wir die folgenden CSS-Tricks anwenden:

Lösung 1: Benutzerdefiniertes Mixin für Flex-Elemente

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

Verwendung:

Tragen Sie das Mixin auf den Flex-Artikel auf:

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

Lösung 2: Flex-Container-Mixin für Elementabfragen

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

Verwendung:

Wenden Sie das Mixin auf den Flex-Container an:

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

Das obige ist der detaillierte Inhalt vonWie kann ich beim Umbrechen konsistente Flex-Elementbreiten über Zeilen hinweg beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!