Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-11-24 19:46:12
Original
519 Leute haben es durchsucht

How to Maintain Consistent Flex Item Widths Across Rows When Wrapping?

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);
    }
  }
}
Nach dem Login kopieren

Verwendung:

Tragen Sie das Mixin auf den Flex-Artikel auf:

.flex-item {
  @include flex-wrap-fix(100px)
}
Nach dem Login kopieren

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);
    }
  }
}
Nach dem Login kopieren

Verwendung:

Wenden Sie das Mixin auf den Flex-Container an:

.flex-container {
  @include flex-container-wrap-items(100px)
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage