Was sind die Unterschiede zwischen Flex-Basis und Breite?

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.

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:

• Chrome erweitert Flex Parent nicht entsprechend dem Inhalt der Kinder
• Bei Verwendung von Flex-Basis läuft der Flex-Artikel über
• Unterschied zwischen Breite und Flex-Basis
• Die Flex-Basis wird bei der Dimensionierung verschachtelter Flex-Container ignoriert.
• Flex-Basis: 100px macht etwas anderes als Breite: 100px + Flex-Basis: Auto

Beispiele:

• https://jsfiddle.net/t419zhra/ (Quelle: @Dremora )
• https://codepen.io/anon/pen/NVxaoy (Quelle @Daniel )
• https://jsfiddle.net/voc9grx6/ (Quelle: Chromium Bugs )
• https://jsfiddle.net/qjpat9zk/ (Quelle: Chromium Bugs )

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:

• Inline-Flex-Behälterbreite wächst nicht
• Inline-Flex-Container (Anzeige: Inline-Flex) erweitert die gesamte Breite des übergeordneten Containers

Beispiel:

• https://jsfiddle.net/p18h0jxt/1/ (vom ersten Beitrag oben)

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

Verweise:

• Warum funktioniert Flex-Box mit einem Div, aber nicht mit einem Tisch?
• Warum wächst flex-grow: 1 nicht für einen Tisch in Safari? (und Edge)

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

• Absolut positionierter Behälter, der die Breite nicht erweitert, um dem Flexbox-Inhalt zu entsprechen

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:

• flexKurzdeklarationen mit einheitlosen flex-basisWerten werden ignoriert
• flex-basis erklärt nicht box-sizing: border-box
• flex-basis unterstützt nicht calc()
• Die Bedeutung wird flex-basisbei der Verwendung von flexKurzschrift ignoriert

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:

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}

<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

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

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.