wake-up-neo.net

Was genau sind Flex-Basis-Eigenschaften?

Gibt es einen Unterschied zwischen der Einstellung von max-width oder width für einen Flex-Artikel anstelle von flex-basis?

Ist es die "Bruchstelle" für die flex-grow/shrink-Eigenschaften?

Und wenn ich flex-wrap: wrap setze, wie entscheidet der Browser, an welcher Stelle der Eintrag in die neue Zeile verschoben werden soll? Entspricht es der Breite oder der Flex-Basis?

Beispiel: http://jsfiddle.net/wP5UP/ Die letzten beiden Felder haben den gleichen flex-basis: 200px, aber only bewegt sich nur eines davon, wenn das Fenster zwischen 300px und 400px liegt. Warum?

41
ilyo

Mit flex-basis können Sie die anfängliche/Anfangsgröße des Elements angeben, bevor andere Elemente berechnet werden. Es kann entweder ein prozentualer oder ein absoluter Wert sein.

Es ist jedoch nicht der Bruchpunkt für Flex-Grow/Schrumpfeigenschaften. Der Browser legt fest, wann das Element umbrochen werden soll, wenn die anfänglichen Größen der Elemente die Breite der Querachse überschreiten (im herkömmlichen Sinne die Breite).

Auf der Grundlage Ihrer Geige liegt der Grund, warum der letzte sich im Fenster nach unten bewegt, daran, dass die Breite des übergeordneten Elements vollständig von den vorherigen Geschwistern eingenommen wurde. Wenn Sie das Umschließen von Inhalten zulassen, werden die Elemente, die nicht in die erste Zeile passen in die nächste Reihe geschoben. Da flex-grow ein Wert ungleich Null ist, wird er einfach gedehnt, um alle in der zweiten Zeile verbleibenden Leerzeichen aufzufüllen.

Siehe Demo-Geige (von Ihnen modifiziert) .

Wenn Sie sich die Geige ansehen, habe ich für den letzten Artikel eine neue Größenangabe vorgenommen:

.size3 {
  flex: 0 1 300px;
}

Sie werden feststellen, dass das Element wie beabsichtigt 300px misst. Wenn Sie jedoch die Flex-Grow-Eigenschaft so anpassen, dass ihr Wert 0 überschreitet ( siehe Beispiel ), wird sie gedehnt, um die Zeile auszufüllen. Dies ist das erwartete Verhalten. Da es in seinem new row context keine zu vergleichenden Geschwister gibt, beeinflusst eine ganze Zahl zwischen 1 und unendlich keinen Einfluss auf die Größe.

Daher kann flex-grow so gesehen werden:

  • 0: (Standardwert) Nicht strecken. Entweder die Größe der Breite des Elements oder der Code flex-basis.
  • 1: Stretch.
  • ≥2 (Ganzzahl n): Stretch. Ist n mal so groß wie andere Elemente mit flex-grow: 1 in derselben Zeile. 
41
Terry

Guter Artikel https://gedd.ski/post/the-differenz-zwischen-bandbreite-und-flexbasis/

flex-Basis ist: die Größe der Flex-Artikel, bevor sie in ein .__ eingefügt werden. Flexbehälter. Es ist die ideale oder hypothetische Größe der Artikel. Aber Flex-Basis ist keine garantierte Größe! Sobald der Browser die .__ platziert. Artikel in ihren Flex-Container, ändern sich die Dinge. Oftmals ist der Flex Container hat nicht genug Speicherplatz oder wird schließlich zusätzlichen Speicherplatz haben Die Flex-Basis-Werte der Elemente werden addiert.

1
zloctb