Wie kann eine konsistente Elementbreite in Flexbox-Layouts nach dem Umwickeln beibehalten werden?

Aufrechterhaltung einer einheitlichen Artikelbreite nach dem Flexbox-Umschlag

Bei Flexbox-Layouts kann es eine Herausforderung sein, eine konsistente Artikelbreite über mehrere Zeilen hinweg beizubehalten. Dies kann jedoch durch eine Kombination von CSS-Eigenschaften erreicht werden, wie unten beschrieben:

CSS-Eigenschaften

flex-grow

Legt den Faktor fest, um den ein Element relativ zu wächst andere Artikel. Wenn Sie dies auf 1 setzen, hat jedes Element das gleiche Wachstumspotenzial.

flex-basis

Definiert die anfängliche Größe eines Elements. Dies bestimmt die Mindestbreite des Elements.

max-width

Legt die maximale Breite eines Elements fest und stellt sicher, dass es seine gewünschte Größe nicht überschreitet.

CSS-Medien Abfragen

Medienabfragen werden verwendet, um die Eigenschaft „max-width“ basierend auf der Größe des Ansichtsfensters anzupassen und so die Konsistenz der Elementbreite über mehrere hinweg aufrechtzuerhalten Zeilen.

Beispiel

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  max-width: 100px;
  flex: 1 0 0;
}

@media (min-width: 200px) {
  li {
    max-width: 50%;
  }
}

@media (min-width: 300px) {
  li {
    max-width: 33.33333%;
  }
}

Erklärung

Dieses CSS legt die anfängliche Breite jedes Elements auf 100 Pixel fest. Anschließend werden Medienabfragen verwendet, um die Eigenschaft „max-width“ anzupassen, wenn sich die Größe des Ansichtsfensters ändert. So wird sichergestellt, dass die Elemente auch dann ihre gewünschte Breite beibehalten, wenn sie in eine neue Zeile umgebrochen werden.

Alternative Lösung

Flex -Wrap-Fix Mixin

Eine elegantere Alternative ist die Verwendung des Flex-Wrap-Fix 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 das Flex-Element an:

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

Dieses Mixin erzielt das gleiche Ergebnis wie die CSS-Medienabfragen, macht dies jedoch überflüssig für sich wiederholenden Code und erleichtert die Wartung.

Das obige ist der detaillierte Inhalt vonWie kann eine konsistente Elementbreite in Flexbox-Layouts nach dem Umwickeln beibehalten werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!