Flexbox: Wie groß ist diese flexible Box?

Dies ist der dritte Teil meiner Serie über Flexbox. In den letzten beiden Artikeln haben wir uns angesehen, was passiert, wenn Sie einen Flex-Container erstellen, und die Ausrichtung untersucht, wie sie in Flexbox funktioniert. Diesmal widmen wir uns der Größenbestimmung. Wie steuern wir die Größe unserer flexiblen Elemente, und welche Entscheidungen trifft der Browser, wenn er die Größe steuert?

Anfängliche Anzeige von Flex-Artikeln

Wenn ich eine Reihe von Elementen habe, die unterschiedliche Inhaltslängen enthalten, und ihre übergeordneten Elemente so einstellen, dass sie display: flex , werden die Elemente als Reihe angezeigt und am Anfang dieser Achse ausgerichtet. Im Beispiel unten haben meine drei Elemente eine kleine Menge an Inhalt und können den Inhalt jedes Elements als ununterbrochene Linie anzeigen. Am Ende des Flex-Containers ist Platz, in den die Items nicht hineinwachsen, weil der Anfangswert von flex-grow 0 ist, don't grow .

Wenn ich diesen Elementen mehr Text hinzufüge, füllen sie schließlich den Container und der Text beginnt umzubrechen. Den Feldern wird ein Teil des Platzes im Container zugewiesen, der dem entspricht, wie viel Text sich in jedem Feld befindet – einem Element mit einer längeren Textfolge wird mehr Platz zugewiesen. Das bedeutet, dass wir nicht mit einer langen dünnen Spalte mit viel Text enden, wenn das Element nebenan nur ein einziges Wort enthält.

Dieses Verhalten ist Ihnen wahrscheinlich bekannt, wenn Sie jemals Flexbox verwendet haben, aber vielleicht haben Sie sich gefragt, wie der Browser mit dieser Größenanpassung umgeht, denn wenn Sie in mehreren modernen Browsern nachsehen, werden Sie feststellen, dass sie alle dasselbe tun. Dies liegt an der Tatsache, dass solche Details in der Spezifikation ausgearbeitet werden, um sicherzustellen, dass jeder, der Flexbox in einem neuen Browser oder einem anderen Benutzeragenten implementiert, weiß, wie diese Berechnung funktionieren soll. Wir können die Spezifikation verwenden, um diese Informationen selbst herauszufinden.

Die intrinsische und extrinsische Größenbestimmung von CSS

Wenn Sie sich etwas über die Größenanpassung in der Flexbox-Spezifikation ansehen, stellen Sie ziemlich schnell fest, dass viele der Informationen, die Sie benötigen, in einer anderen Spezifikation enthalten sind – CSS Intrisnic und Extrinsic Sizing. Das liegt daran, dass die Größenkonzepte, die wir verwenden, nicht einzigartig für Flexbox sind, genauso wie die Ausrichtungseigenschaften nicht einzigartig für Flexbox sind. Wie diese Größenkonstrukte jedoch in Flexbox verwendet werden, müssen Sie in der Flexbox-Spezifikation nachsehen. Es kann sich ein wenig so anfühlen, als würden Sie hin und her springen, also fasse ich hier ein paar Schlüsseldefinitionen zusammen, die ich im Rest des Artikels verwenden werde.

Bevorzugte Größe

Die bevorzugte Größe einer Box ist die Größe, die durch eine width oder eine height definiert ist, oder die logischen Aliase für diese Eigenschaften von inline-size und block-size . Durch die Nutzung:

 .box { width: 500px; }

Oder der logische Alias inline-size :

 .box { inline-size: 500px; }

Sie geben an, dass Ihre Box 500 Pixel breit oder 500 Pixel in Inline-Richtung sein soll.

Mindestinhaltsgröße

Die minimale Inhaltsgröße ist die kleinste Größe, die eine Box haben kann, ohne einen Überlauf zu verursachen. Wenn Ihr Karton Text enthält, werden alle möglichen Soft-Wrapping-Möglichkeiten genutzt.

maximale Inhaltsgröße

Die maximale Inhaltsgröße ist die größte Größe, die die Box haben kann, um den Inhalt aufzunehmen. Wenn das Feld Text ohne Formatierung zum Aufteilen enthält, wird es als eine lange, ununterbrochene Zeichenfolge angezeigt.

Flex Item Hauptgröße

Die Hauptgröße eines Flex-Elements ist die Größe, die es in der Hauptdimension hat. Wenn Sie in einer Reihe arbeiten – auf Englisch – dann ist die Hauptgröße die Breite. In einer englischen Spalte ist die Hauptgröße die Höhe.

Artikel haben auch eine minimale und maximale Hauptgröße, die durch ihre min-width oder min-height auf der Hauptdimension definiert sind.

Ermitteln der Größe eines Flex-Artikels

Nachdem wir nun einige Begriffe definiert haben, können wir uns ansehen, wie unsere flexiblen Artikel dimensioniert sind. Der Anfangswert der flex Eigenschaften ist wie folgt:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

Die flex-basis ist das, woraus die Größe berechnet wird. Wenn wir flex-basis auf 0 und flex-grow auf 1 setzen, haben alle unsere Boxen keine Anfangsbreite, sodass der Platz im Flex-Container gleichmäßig verteilt wird und jedem Element die gleiche Menge Platz zugewiesen wird.

Wenn hingegen flex-basis auto und flex-grow: 1 ist, wird nur der freie Speicherplatz verteilt, wobei die Größe des Inhalts berücksichtigt wird.

In Situationen, in denen kein freier Platz vorhanden ist, beispielsweise wenn mehr Inhalt vorhanden ist, als in eine einzelne Zeile passt, ist kein Platz zum Verteilen vorhanden.

Dies zeigt uns, dass es ziemlich wichtig ist, herauszufinden, was auto bedeutet, wenn wir wissen wollen, wie Flexbox die Größe unserer Boxen berechnet. Der Wert von auto wird unser Ausgangspunkt sein.

Auto definieren

Wenn auto als Wert für etwas in CSS definiert wird, hat es in diesem Zusammenhang eine sehr spezifische Bedeutung, die einen Blick wert ist. Die CSS-Arbeitsgruppe verbringt viel Zeit damit, herauszufinden, was auto in jedem Kontext bedeutet, wie dieser Vortrag für den Spezifikationseditor Fantasai erklärt.

Wir finden die Informationen darüber, was auto bedeutet, wenn es als flex-basis verwendet wird, in der Spezifikation. Die oben definierten Begriffe sollen uns helfen, diese Aussage zu analysieren.

„Wenn es für ein Flex-Element angegeben wird, ruft das Schlüsselwort auto den Wert der Hauptgrößeneigenschaft als verwendete ‚Flex-Basis‘ ab. Wenn dieser Wert selbst auto ist, dann ist der verwendete Wert ‚content‘.“

Wenn also unsere flex-basis auto ist, wirft Flexbox einen Blick auf die definierte Eigenschaft main size. Wir hätten eine Hauptgröße, wenn wir einem unserer Flex-Artikel eine width gegeben hätten. Im folgenden Beispiel haben die Elemente alle eine Breite von 110 Pixel, daher wird dies als Hauptgröße verwendet, da der Anfangswert für Flex-Basis Auto ist.

Unser anfängliches Beispiel hat jedoch Elemente ohne Breite, das bedeutet, dass ihre Hauptgröße auto ist, und deshalb müssen wir zum nächsten Satz übergehen: „Wenn dieser Wert selbst auto ist, dann ist der verwendete Wert content .“

Wir müssen uns nun ansehen, was die Spezifikation über das content aussagt. Dies ist ein weiterer Wert, den Sie (in unterstützenden Browsern) für Ihre flex-basis verwenden können, zum Beispiel:

 .item { flex: 1 1 content; }

Die Spezifikation definiert content wie folgt:

„Gibt eine automatische Größe basierend auf dem Inhalt des Flex-Elements an. (Es entspricht normalerweise der maximalen Inhaltsgröße, jedoch mit Anpassungen zur Handhabung von Seitenverhältnissen, intrinsischen Größenbeschränkungen und orthogonalen Flüssen.

In unserem Beispiel können wir bei flexiblen Elementen, die Text enthalten, einige der komplizierteren Anpassungen ignorieren und den content als maximale Inhaltsgröße behandeln.

Das erklärt also, warum, wenn wir eine kleine Textmenge in jedem Element haben, der Text nicht umbrochen wird. Die Flex-Elemente werden automatisch in der Größe angepasst, sodass Flexbox ihre maximale Inhaltsgröße betrachtet, die Elemente in dieser Größe in ihren Container passen und die Arbeit erledigt ist!

Die Geschichte endet hier nicht, denn wenn wir mehr Inhalt hinzufügen, bleiben die Boxen nicht auf der maximalen Inhaltsgröße. Wenn sie es täten, würden sie aus dem flexiblen Behälter ausbrechen und ein Überlaufen verursachen. Sobald sie den Behälter füllen, beginnt sich der Inhalt zu verpacken und die Gegenstände nehmen je nach Inhalt unterschiedliche Größen an.

Flexible Längen auflösen

An diesem Punkt wird die Spezifikation ziemlich komplex aussehend, aber die Schritte, die ausgeführt werden müssen, sind wie folgt:

Addieren Sie zunächst die Hauptgröße aller Artikel und sehen Sie, ob sie größer oder kleiner als der verfügbare Platz im Container ist.

Wenn die Containergröße größer als die Gesamtgröße ist, kümmern wir uns um den flex-grow Faktor, da wir Platz zum Wachsen haben.

Wenn die Behältergröße kleiner als die Gesamtgröße ist, kümmern wir uns um den flex-shrink Faktor, da wir schrumpfen müssen.

Frieren Sie alle unflexiblen Artikel ein, was bedeutet, dass wir bei bestimmten Artikeln bereits eine Größe festlegen können. Wenn wir flex-grow verwenden, würde dies alle Elemente mit flex-grow: 0 . Dies ist das Szenario, das wir haben, wenn unsere Flex-Artikel noch Platz im Container haben. Der Anfangswert von flex-grow ist 0, also werden sie so groß wie ihre maximale Breite und wachsen dann nicht mehr von ihrer Hauptgröße.

Wenn wir flex-shrink verwenden, würde dies alle Artikel mit flex-shrink: 0 beinhalten. Wir können sehen, was in diesem Schritt passiert, wenn wir unserem Satz von flexiblen Artikeln einen flex-shrink Faktor von 0 geben. Die Artikel werden in ihrem Zustand mit max-content eingefroren und biegen sich daher nicht und ordnen sich selbst an, um in den Container zu passen.

In unserem Fall – mit den Anfangswerten von Flex-Artikeln – können unsere Artikel schrumpfen. Die Schritte werden also fortgesetzt und der Algorithmus tritt in eine Schleife ein, in der er ausarbeitet, wie viel Platz zugewiesen oder weggenommen werden soll. In unserem Fall verwenden wir flex-shrink , da die Gesamtgröße unserer Artikel größer ist als der Behälter, sodass wir Platz wegnehmen müssen.

Der flex-shrink Faktor wird mit der inneren Basisgröße des Artikels multipliziert, in unserem Fall ist das die max-content . Dies ergibt einen Wert, mit dem Platz reduziert werden kann. Wenn Gegenstände nur gemäß dem flex-shrink Faktor Platz entfernten, könnten kleine Gegenstände im Wesentlichen verschwinden, nachdem ihr gesamter Platz entfernt wurde, während der größere Gegenstand immer noch Platz zum Schrumpfen hat.

Es gibt einen zusätzlichen Schritt in dieser Schleife, um nach Gegenständen zu suchen, die kleiner oder größer als ihre Ziel-Hauptgröße werden würden, in welchem ​​Fall der Gegenstand aufhört zu wachsen oder zu schrumpfen. Auch hier soll verhindert werden, dass bestimmte Gegenstände im Vergleich zu den anderen Gegenständen winzig oder massiv werden.

All dies wurde in Bezug auf die Spezifikation vereinfacht, da ich mir einige der kantigeren Szenarien nicht angesehen habe und Sie im Allgemeinen einfach weiterdenken können, vorausgesetzt, Sie lassen Flexbox gerne sein Ding machen und sind nicht hinter Pixeln her Perfektion. Sich an die folgenden zwei Tatsachen zu erinnern, wird in den meisten Fällen funktionieren.

Wenn Sie von auto aus wachsen, wird die flex-basis entweder als beliebige Breite oder Höhe des Elements oder als max-content behandelt. Der Platz wird dann gemäß dem flex-grow Faktor zugewiesen, wobei diese Größe als Ausgangspunkt verwendet wird.

Wenn Sie von auto verkleinern, wird die flex-basis entweder als beliebige Breite oder Höhe des Elements oder als max-content behandelt. Speicherplatz wird dann entsprechend der flex-basis Basisgröße multipliziert mit dem flex-shrink Faktor entfernt und daher proportional zur maximalen Inhaltsgröße der Elemente entfernt.

Wachstum und Schrumpfung kontrollieren

Ich habe den größten Teil dieses Artikels damit verbracht, zu beschreiben, was Flexbox tut, wenn es sich selbst überlassen wird. Sie können natürlich eine größere Kontrolle über Ihre Flex-Elemente ausüben, indem Sie die flex -Eigenschaften verwenden. Sie werden hoffentlich vorhersehbarer erscheinen, wenn sie verstehen, was hinter den Kulissen passiert.

Indem Sie Ihre eigene flex-basis oder dem Artikel selbst eine Größe geben, die dann als flex-basis verwendet wird, übernehmen Sie die Kontrolle vom Algorithmus und teilen Flexbox mit, dass Sie von dieser bestimmten Größe aus wachsen oder schrumpfen möchten. Sie können das Wachsen oder Schrumpfen ganz ausschalten, indem Sie flex-grow oder flex-shrink auf 0 setzen. An diesem Punkt lohnt es sich jedoch, den Wunsch, Flex-Elemente zu steuern, als Zeit zu verwenden, um zu überprüfen, ob Sie die richtige Layout-Methode verwenden. Wenn Sie versuchen, flexible Elemente in zwei Dimensionen auszurichten, wählen Sie möglicherweise besser das Rasterlayout.

Debuggen von größenbezogenen Problemen

Wenn Ihre Flex-Elemente am Ende eine unerwartete Größe haben, liegt dies normalerweise daran, dass Ihre Flex-Basis automatisch ist und diesem Element eine Breite gibt, die dann als Flex-Basis verwendet wird. Das Überprüfen des Elements in DevTools kann dabei helfen, festzustellen, woher die Größe kommt. Sie können auch versuchen, eine flex-basis von 0 festzulegen, wodurch Flexbox gezwungen wird, das Element so zu behandeln, als hätte es eine Breite von Null. Auch wenn dies nicht das gewünschte Ergebnis ist, hilft es, den flex-basis Nutzungswert als Ursache für Ihre Größenprobleme zu identifizieren.

Flex-Lücken

Eine häufig nachgefragte Funktion von Flexbox ist die Möglichkeit, Lücken oder Bundstege zwischen Flex-Elementen auf die gleiche Weise anzugeben, wie wir Lücken im Rasterlayout und im mehrspaltigen Layout angeben können. Dieses Feature wird für Flexbox als Teil von Box Alignment spezifiziert, und die erste Browser-Implementierung ist auf dem Weg. Firefox erwartet, die Lückeneigenschaften für Flexbox in Firefox 63 auszuliefern. Das folgende Beispiel kann in Firefox Nightly angezeigt werden.

Wie beim Rasterlayout wird die Länge der Lücke berücksichtigt, bevor der Platz auf Flex-Elemente verteilt wird.

Einpacken

In diesem Artikel habe ich versucht, einige der Feinheiten zu erklären, wie Flexbox die Größe der Flex-Elemente ermittelt. Es mag ein wenig akademisch erscheinen, aber wenn Sie etwas Zeit brauchen, um zu verstehen, wie dies funktioniert, können Sie viel Zeit sparen, wenn Sie Flexbox in Ihren Layouts verwenden. Ich finde es sehr hilfreich, auf die Tatsache zurückzukommen, dass Flexbox standardmäßig versucht, Ihnen das sinnvollste Layout einer Reihe von Elementen mit unterschiedlichen Größen zu geben. Wenn ein Element mehr Inhalt hat, wird ihm mehr Platz eingeräumt. Wenn Sie und Ihr Design nicht mit dem übereinstimmen, was Flexbox für das Beste hält, können Sie die Kontrolle zurückerlangen, indem Sie Ihre eigene flex-basis .