Wie erreicht man einheitliche Breiten für verpackte Flex-Artikel in Flexbox-Layouts?

So stellen Sie eine einheitliche Breite verpackter Flex-Artikel in einem Flexbox-Layout sicher

Problem

In einem Flexbox-Layout halten sich Flex-Artikel normalerweise an die Vorgaben minimale und maximale Breite. Wenn flexible Elemente jedoch in eine neue Zeile umgebrochen werden, neigen sie dazu, sich auszudehnen und den verfügbaren Platz einzunehmen, was zu inkonsistenten Breiten zwischen Elementen in verschiedenen Zeilen führt.

Lösung

Es gibt zwar keine direkte Lösung Für dieses Problem innerhalb der CSS-Spezifikation kann mithilfe von Medienabfragen eine Problemumgehung erreicht werden.

Mixin-Ansatz

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

Verwendung:

Wenden Sie das Mixin auf jedes Flex-Element an:

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

Erklärung

Dieses Mixin generiert eine Reihe von Medienabfragen basierend auf dem angegebenen Flex -Basis der Flex-Artikel. Jede Medienabfrage berechnet die maximale Breite des Flex-Elements für eine bestimmte Ansichtsfensterbreite, indem sie 100 % durch die Anzahl der Flex-Elemente dividiert, die in diese Zeile passen.

Mixin für Container-basierte Steuerung aktualisiert

In einigen Fällen stimmt die Breite des Flex-Containers möglicherweise nicht mit der Breite des Ansichtsfensters überein. Um dieses Problem zu beheben, kann stattdessen eine aktualisierte Version des Mixins auf den Flex-Container angewendet werden:

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

Tragen Sie das Mixin auf den Flex-Container auf:

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

Beispiel

Ein modifiziertes CodePen-Beispiel finden Sie hier:
http://codepen.io/anon/pen/aNVzoJ

Vorbehalte

• Dieser Ansatz unterstützt keine gleichen Breiten zwischen Flex-Elementen in allen Zeilen.
• Wenn die maximale Breite des Ansichtsfensters bekannt ist, sollte sie angegeben werden, um übermäßige Medienabfragen zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie erreicht man einheitliche Breiten für verpackte Flex-Artikel in Flexbox-Layouts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!