Wie kann die einheitliche Breite von Flexartikeln nach dem Einwickeln in die Flexbox beibehalten werden?

So behalten Sie nach dem Verpacken eine einheitliche Breite von Flex-Artikeln bei

Flexbox bietet die Möglichkeit, flexible Layouts zu erstellen, aber wenn es um das Verpacken von Flex-Artikeln geht, können deren Breiten variieren variieren drastisch. Um dieses Problem anzugehen, wollen wir uns mit einer cleveren Problemumgehung mithilfe von CSS-Medienabfragen befassen.

Die Lösung

Obwohl es sich nicht unbedingt um eine Lösung handelt, bietet der folgende Ansatz eine elegante Alternative Medienabfragen und ohne auf JavaScript zurückzugreifen.

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 Ihren Flex an item:

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

Erweiterte Alternative

Wenn die Breite Ihres Flex-Containers nicht auf die Größe des Ansichtsfensters beschränkt ist, können Sie Elementabfragen anstelle von Browser-Medienabfragen verwenden. Hier ist ein Mixin für den Flex-Container:

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

Erklärung

Für jede angegebene Flex-Basis berechnen wir die maximale Anzahl von Elementen pro Zeile basierend auf dem Ansichtsfenster Breite. Anschließend erstellen wir Medienabfragen, um die maximale Breite des Elements als Prozentsatz der Breite des Ansichtsfensters einzuschränken.

Beispiel

Sehen Sie sich den aktualisierten CodePen unten an:

https://codepen.io/anon/pen/aNVzoJ

Dies zeigt, wie flexible Artikel nach dem Einwickeln ihre gewünschte Breite beibehalten und so ein einheitliches Layout gewährleisten.

Das obige ist der detaillierte Inhalt vonWie kann die einheitliche Breite von Flexartikeln nach dem Einwickeln in die Flexbox beibehalten werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!