Wie kann ich mithilfe von Medienabfragen eine einheitliche Breite für umhüllte Flex-Elemente beibehalten?

Beibehalten einer einheitlichen Breite für verpackte Flex-Artikel

Bei Verwendung von Flexbox zum Anzeigen einer Reihe von Artikeln kann es wünschenswert sein, eine einheitliche Breite beizubehalten für die Elemente, auch wenn sie in mehrere Zeilen umgebrochen werden. Traditionell stellt dies eine Herausforderung dar, insbesondere wenn die Breite des Elements innerhalb eines Bereichs liegt, der mit „Min-Breite“ und „Max-Breite“ angegeben wird.

Dieser Artikel stellt eine unkonventionelle, aber effektive Problemumgehung vor, die Medienabfragen nutzt, um den gewünschten Effekt zu erzielen .

Mixin (SCSS)

@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

Um die Problemumgehung anzuwenden, wenden Sie einfach das Mixin auf Ihren Flex-Artikel an:

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

Erläuterung

Wir erstellen Medienabfragen, um die maximale Breite der Elemente basierend zu definieren auf die Breite des Browserfensters. Wenn beispielsweise jedes Element eine maximale Breite von 100 Pixeln haben soll, erstellen wir Medienabfragen für Browserbreiten im Bereich von 100 Pixel bis 600 Pixel und stellen so sicher, dass sich die Elementbreite angemessen an verschiedene Browsergrößen anpasst.

Durch die Implementierung dieses Mixins Eingewickelte Flex-Elemente behalten ihre definierte Breite bei und bleiben gleichzeitig innerhalb der angegebenen Einschränkungen. Es ist wichtig zu beachten, dass die Breite des Flex-Containers mit der Größe des Ansichtsfensters übereinstimmen sollte, um Diskrepanzen zu vermeiden.

Darüber hinaus ermöglicht das bereitgestellte Update die Anwendung der Problemumgehung auf den Flex-Container, um sicherzustellen, dass die Artikel ordnungsgemäß verpackt und die Breite unabhängig davon beibehalten wird Flex-Containerbreite.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von Medienabfragen eine einheitliche Breite für umhüllte Flex-Elemente beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!