Was sind die Unterschiede zwischen Flex-Basis und Breite?

224

Es gab Fragen und Artikel dazu, aber soweit ich das beurteilen kann, nichts aussagekräftiges. Die beste Zusammenfassung, die ich finden konnte, ist

Mit flex-base können Sie die Anfangs- / Startgröße des Elements angeben, bevor etwas anderes berechnet wird. Es kann entweder ein Prozentsatz oder ein absoluter Wert sein.

... was an sich nicht viel über das Verhalten von Elementen mit Flex-Basis- Set aussagt . Mit meinem derzeitigen Wissen über Flexbox verstehe ich nicht, warum das auch die Breite nicht beschreiben kann .

Ich würde gerne wissen, wie genau sich die Flex-Basis in der Praxis von der Breite unterscheidet :

  • Was ändert sich optisch, wenn ich die Breite durch eine Flex-Basis ersetze (und umgekehrt)?
  • Was passiert, wenn ich beide auf einen anderen Wert setze? Was passiert, wenn sie den gleichen Wert haben?
  • Gibt es einige Sonderfälle, in denen die Verwendung von Breite oder Flex-Basis einen signifikanten Unterschied zur Verwendung der anderen Basis hätte?
  • Wie unterscheiden sich Breite und Flex-Basis in Verbindung mit anderen Flexbox-Stilen wie Flex-Wrap , Flex-Grow und Flex-Shrink ?
  • Irgendwelche anderen signifikanten Unterschiede?

Bearbeiten / Klarstellung : Diese Frage wurde in einem anderen Format in Was genau Flex-Basis-Eigenschaftssätze gestellt? Ein direkterer Vergleich oder eine Zusammenfassung der Unterschiede zwischen Flex-Basis und Breite (oder Höhe ) wäre jedoch hilfreich.

css flexbox width jpeltoniemi
quelle
Bester Artikel , der die Flex-Basis erklärt, Flex wächst und schrumpft insgesamt
ZenVentzi

Antworten:

339

Erwägen flex-direction

Das erste, was Ihnen beim Lesen Ihrer Frage einfällt, ist, dass flex-basisdies nicht immer zutrifft width.

Wann flex-directionist row, flex-basissteuert die Breite.

Aber wann flex-directionist column, flex-basissteuert die Höhe.

Hauptunterschiede

Hier sind einige wichtige Unterschiede zwischen flex-basisund width/ height:

  • flex-basisgilt nur für flexible Artikel. Flex-Container (die nicht auch Flex-Elemente sind) werden ignoriert flex-basis, können jedoch widthund verwenden height.

  • flex-basisfunktioniert nur auf der Hauptachse. Wenn Sie sich beispielsweise in befinden flex-direction: column, wird die widthEigenschaft für die horizontale Dimensionierung von Flex-Elementen benötigt.

  • flex-basishat keinen Einfluss auf absolut positionierte Flex-Artikel. widthund heightEigenschaften wären notwendig. Absolut positionierte Flex-Elemente nehmen nicht am Flex-Layout teil .

  • Durch die Verwendung der flexEigenschaft, drei Eigenschaften - flex-grow, flex-shrinkund flex-basis- kann fein säuberlich in eine Erklärung kombiniert werden. Die Verwendung widthderselben Regel würde mehrere Codezeilen erfordern.

Browserverhalten

In Bezug auf die Art und Weise , wie sie gerendert werden, sollte es keinen Unterschied zwischen flex-basisund geben width, es flex-basissei denn, es ist autooder content.

Aus der Spezifikation:

7.2.3. Das flex-basisEigentum

Für alle Werte außer autound content, flex-basiswird auf die gleiche Art und Weise wie aufgelöst widthin horizontalem Schreibmodus.

Aber die Auswirkungen von autooder contentkönnen minimal sein oder gar nichts. Mehr aus der Spezifikation:

auto

Bei Angabe in einem Flex-Element autoruft das Schlüsselwort den Wert der Hauptgrößeneigenschaft als verwendet ab flex-basis. Wenn dieser Wert selbst ist auto, ist der verwendete Wert content.

content

Zeigt die automatische Größenanpassung basierend auf dem Inhalt des Flex-Elements an.

Hinweis: Dieser Wert war in der ersten Version von Flexible Box Layout nicht vorhanden und wird daher von einigen älteren Implementierungen nicht unterstützt. Der äquivalente Effekt kann erzielt werden, indem autozusammen mit einer Hauptgröße ( widthoder height) von verwendet wird auto.

Also, gemäß der Spezifikation, flex-basisund widthidentisch auflösen, es flex-basissei denn, ist autooder content. In solchen Fällen flex-basiskann die Inhaltsbreite verwendet werden (die vermutlich auch von der widthEigenschaft verwendet wird).

Der flex-shrinkFaktor

Es ist wichtig, sich die Anfangseinstellungen eines Flex-Containers zu merken. Einige dieser Einstellungen umfassen:

  • flex-direction: row - Flex-Elemente werden horizontal ausgerichtet
  • justify-content: flex-start - Flex-Elemente werden am Anfang der Linie auf der Hauptachse gestapelt
  • align-items: stretch - Flex-Elemente werden erweitert, um die Quergröße des Containers abzudecken
  • flex-wrap: nowrap - Flex-Elemente müssen in einer einzelnen Zeile bleiben
  • flex-shrink: 1 - Ein flexibler Gegenstand darf schrumpfen

Beachten Sie die letzte Einstellung.

Da flex Elemente erlaubt sind standardmäßig zu schrumpfen (was sie überläuft den Behälter verhindert), die angegebene flex-basis/ width/ heightaußer Kraft gesetzt werden kann.

Zum Beispiel flex-basis: 100pxoder width: 100px, gekoppelt mit flex-shrink: 1, wird nicht unbedingt 100px sein.

Um die angegebene Breite zu rendern - und festzuhalten - müssen Sie das Verkleinern deaktivieren:

div {
   width: 100px;
   flex-shrink: 0;
}

ODER

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

ODER, wie von der Spezifikation empfohlen:

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

7.2. Komponenten der Flexibilität

Autoren werden aufgefordert, die Flexibilität mithilfe der flexKurzschrift und nicht direkt mit ihren Langhand-Eigenschaften zu steuern , da die Kurzschrift alle nicht spezifizierten Komponenten korrekt zurücksetzt, um den allgemeinen Verwendungszwecken gerecht zu werden .

Browser-Fehler

Einige Browser haben Probleme bei der Dimensionierung von Flex-Elementen in verschachtelten Flex-Containern.

flex-basisin einem verschachtelten Flex-Container ignoriert. widthfunktioniert.

Bei der Verwendung flex-basisignoriert der Container die Größe seiner untergeordneten Elemente, und die untergeordneten Elemente laufen über den Container. Mit der widthEigenschaft respektiert der Container jedoch die Größe seiner Kinder und erweitert sich entsprechend.

Verweise:

Beispiele:

Flexgegenstände mit flex-basisund white-space: nowrapÜberlaufbehälter inline-flex. widthfunktioniert.

Es scheint, dass ein Flex-Container, der so eingestellt ist, inline-flexdass er flex-basisein Kind beim Rendern eines Geschwisters nicht erkennt white-space: nowrap(obwohl es sich nur um ein Element mit undefinierter Breite handeln kann). Der Container wird nicht erweitert, um die Elemente aufzunehmen.

Wenn jedoch die widthEigenschaft anstelle von verwendet wird flex-basis, berücksichtigt der Container die Größe seiner untergeordneten Elemente und wird entsprechend erweitert. Dies ist in IE11 und Edge kein Problem.

Verweise:

Beispiel:

flex-basis(und flex-grow) nicht am Tabellenelement arbeiten

Verweise:

flex-basisschlägt in Chrome und Firefox fehl, wenn der Großelterncontainer ein verkleinertes Element ist. Das Setup funktioniert in Edge einwandfrei.

Wie in dem im obigen Link dargestellten Beispiel wird bei position: absoluteVerwendung von floatund inline-blockauch dieselbe fehlerhafte Ausgabe gerendert ( jsfiddle-Demo ).

Fehler, die IE 10 und 11 betreffen:

Michael Benjamin
quelle
2
Wie wäre es min-width:100px;? Kann es eine Option sein, das Schrumpfen zu deaktivieren?
Mori
1
@ Mori, ja, flex-shrinkhört bei auf min-width. Die äquivalente Flex-Regel wäre flex: 1 0 100px.
Michael Benjamin
flex: 1 0 100pxführt zum gleichen Ergebnis, aber ich bin nicht sicher, was Sie mit "gleichwertig" meinen.
Mori
Ich meine, warum sollten wir es flex: 0 0 100pxzum Beispiel nicht als gleich betrachten ?
Mori
2
@ Mori, denn dann ist es nur gleich Breite . Es benötigt die Flex-Grow: 1- Komponente, damit das Element ab der durch die Flex-Basis festgelegten Mindestbreite wachsen kann .
Michael Benjamin
33

Zusätzlich zu Michael_Bs hervorragender Zusammenfassung lohnt es sich, dies zu wiederholen:

Mit flex-base können Sie die Anfangs- / Startgröße des Elements angeben , bevor etwas anderes berechnet wird. Es kann entweder ein Prozentsatz oder ein absoluter Wert sein.

Der wichtige Teil hier ist initial .

Dies löst sich von selbst in Breite / Höhe auf, bis die anderen Eigenschaften des Flex-Wachstums / Schrumpfens ins Spiel kommen.

So. ein Kind mit

.child {
 flex-basis:25%;
 flex-grow:1;
}

wird anfangs 25% breit sein, sich dann aber sofort so weit wie möglich ausdehnen, bis die anderen Elemente berücksichtigt werden. Wenn keine vorhanden sind, wird es 100% breit / hoch sein.

Eine kurze Demo:

Code-Snippet anzeigen

Das Experimentieren mit flex-grow, flex-shrinkund flex-basis (oder der Kurzschrift flex :fg fs fb) ... kann zu interessanten Ergebnissen führen.

Paulie_D
quelle
Ich fand heraus, dass im Allgemeinen im flexiblen Kontext beide flex-basisund width / heightdie Anfangs- / Startgröße eines Elements festgelegt wurden. Zum Beispiel flex-basis: 200pxfunktioniert im Grunde das gleiche wie flex-basis: auto; width: 200px;. Es sieht so aus, als ob wenn flex-basisnicht eingestellt, autonur der width / heightWert überschrieben wird. Der einzige Unterschied, den ich sehe, ist die Art und Weise, wie mit dem Überlauf von Inhalten umgegangen wird.
Karolis
5

Möglicherweise der wichtigste Punkt zum Hinzufügen:

Was ist, wenn der Browser dies nicht unterstützt flex? In einem solchen Fall width/heightübernehmen und ihre Werte gelten.

Es ist eine sehr gute Idee - fast unabdingbar -, width/heightElemente zu definieren , auch wenn Sie dann einen völlig anderen Wert für haben flex-basis. Denken display:flexSie daran, zu testen, indem Sie deaktivieren und sehen, was Sie erhalten.

Niet the Dark Absol
quelle
2
Unter den wichtigsten Browsern sind die einzigen, die keine Flex-Eigenschaften unterstützen, IE <10. Caniuse.com/#search=flex
Michael Benjamin
1
@Michael_B Sicher, und vielleicht bin es nur ich, aber ich muss auch mobile Browser unterstützen, bis einschließlich des Nintendo 3DS-Browsers, der entschieden nicht unterstützt flex.
Niet the Dark Absol