Untersuchen der CSS-Flex-Eigenschaft

Haben Sie sich jemals gefragt, wie eine CSS-Kurzschrift funktioniert flex? Es ermöglicht Ihnen , Eigenschaftswerte zu setzen flex-grow, flex-shrinkund flex-basis. Mir ist aufgefallen, dass diese Eigenschaft am häufigsten in einer Ansicht verwendet wird flex: 1, wodurch sich ein flexibles Objekt dehnen kann, um verfügbaren Platz einzunehmen. In diesem Artikel möchte ich über eine Kurzschrift-Eigenschaft und die Eigenschaften sprechen, die mit ihr festgelegt werden. Ich werde darüber sprechen, wann und warum Sie diese Eigenschaften verwenden können. Ich werde praktische Beispiele geben.







flex

Flex-Grow-Eigenschaft

Die CSS-Eigenschaft wird flex-growverwendet, um den sogenannten Flex-Grow-Faktor anzupassen, mit dem diese Elemente gedehnt werden können, um den verfügbaren Platz auszufüllen. Für diese Eigenschaft können nur Ganzzahlen als Werte verwendet werden. Schauen wir uns ein Beispiel an.



Hier ist das HTML-Markup:

<div class="wrapper">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Hier sind die Stile:

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex-grow: 1;
}

Eine Eigenschaft flex-growkann abhängig vom Wert der Eigenschaft die Breite oder Höhe eines Elements beeinflussen flex-direction. Beachten Sie bei der Betrachtung der folgenden Beispiele, dass die von ihnen verwendete Eigenschaft flex-directionauf den Standardwert ( row) festgelegt ist. Wenn dies nicht der Fall ist, werde ich Ihnen davon erzählen.



Beachten Sie, dass flex-growFlex-Elemente ohne Verwendung auf ihre Standardbreite eingestellt werden, die ihrer ursprünglichen Breite entspricht. Und wenn verwendet flex-grow: 1, wird der verfügbare freie Speicherplatz auf die Elemente verteilt.





Oben gilt die Flex-Grow-Eigenschaft nicht. Im Folgenden finden Sie Flex-Grow: 1 Sie



fragen sich möglicherweise, wie genau der freie Speicherplatz auf Flex-Elemente verteilt ist. Das ist eine gute Frage. Ich werde es bald beantworten.



Die folgende Abbildung zeigt, wie die Elemente ohne Verwendung der Eigenschaft aussehenflex-grow. Mit anderen Worten, Elemente werden hier in ihrer normalen Größe angezeigt.





Die Flex-Grow-Eigenschaft wird nicht verwendet.



Um zu verstehen, wie die Breite von Flex-Elementen berechnet wird, sehen Sie sich die folgenden Formeln an. Ich habe diese Formeln im Material von Samantha Ming gefunden (wofür ich ihr danke!).



Berechnen wir die Breite des ersten Elements - des Elements, das den Text enthältCSS.





Ermitteln der Breite eines Elements Hier wird



also die folgende Formel verwendet:

  = ((flex-grow  /   flex-grow) *  ) +   

Lassen Sie uns diese Formel analysieren:

• flex-grow Ist der für den Artikel angegebene Wachstumsfaktor.
• flex-grow Ist die Summe der Werte der Wachstumsfaktoren aller Elemente.
• - Dies ist der freie Speicherplatz des Containers, der vor dem Einsatz von Mechanismen darin verfügbar ist flex-grow.
• - Dies ist, wie Sie vielleicht erraten haben, die Breite des Elements, bevor Sie es ändern flex-grow.

Die Substitution von reellen Werten in diese Formel führt zu folgenden Ergebnissen:

  = ( (1 / 3) * 498) + 77 = 241

Unterschiedliche Flex-Grow-Werte für unterschiedliche Artikel

Im vorherigen Beispiel wurde für alle Flex-Elemente der gleiche Wert verwendet flex-grow. Versuchen wir nun, dem ersten Element eine Eigenschaft zuzuweisen flex-grow: 2. Wie wird die Breite der Elemente jetzt berechnet? Beachten Sie bei der Betrachtung der folgenden Formel, dass die Breite des freien Speicherplatzes in unserem Beispiel gleich ist 498px.





Ermitteln der Breite eines Elements in einer Situation, in der verschiedene Elemente unterschiedliche Flex-Grows aufweisen



Wie Sie sehen können, wird hierfür der oben beschriebene Mechanismus zur Berechnung der Breite von Elementen verwendet. Der Hauptunterschied besteht darin, dass der Wertflex-growfür das erste Element auf gesetzt wird2, was sich in der Formel zur Berechnung der Breite der Elemente widerspiegelt.

Kann 0 als Flex-Grow-Wert verwendet werden?

Natürlich kannst du! Da die Eigenschaft flex-growganzzahlige Werte akzeptiert und in diese geschrieben werden kann 0. Dies bedeutet, dass wir nicht möchten, dass die Größe des Flex-Elements geändert wird, wodurch ein Teil des freien Speicherplatzes des Containers belegt wird.





Folgen des Festlegens der Flex-Grow-Eigenschaft auf 0



Wie Sie sehen,flex-grow: 0ändertdas Element, dem die Eigenschaft zugewiesenist, die Breite nicht. Diese Technik kann nützlich sein, wenn ein Flex-Element seine ursprüngliche Breite beibehalten soll.

Flex-Grow macht Elemente nicht gleich

Es gibt ein weit verbreitetes Missverständnis, dass die Verwendung flex-growermöglicht, dass übereinstimmende Elemente dieselbe Breite haben. Das ist ein Fehler. Der Verwendungszweck flex-growbesteht darin, den verfügbaren Platz zwischen den Elementen zu verteilen. Wie Sie durch Analysieren der obigen Formeln sehen können, wird die endgültige Breite von Flex-Elementen basierend auf ihrer ursprünglichen Breite berechnet (d. H. Was sie hatten, bevor sie angewendet wurden flex-grow).



Wenn Sie dafür sorgen müssen, dass alle Elemente einer bestimmten Menge dieselbe Breite haben, müssen Sie dies mithilfe der Eigenschaft tun flex-basis. Wir werden weiter unten darüber sprechen.

Flex-Shrink-Eigenschaft

Mit der Eigenschaft flex-shrinkkönnen Sie den sogenannten Flex-Shrink-Faktor einstellen. Wenn alle Flex-Elemente größer als ihr Container sind, werden die Elemente verkleinert, um den zugewiesenen Eigenschaftswerten zu entsprechen flex-shrink.





Die Flex-Shrink-Eigenschaft wird dem mittleren Element zugewiesen: 1



Hier sind die Stile für dieses Beispiel:

.item-2 {
    width: 300px;
    flex-shrink: 1;
}

Der Browser macht die Breite des Elements item-2gleich, 300pxwenn die folgenden Bedingungen erfüllt sind:

• Die Gesamtbreite aller Elemente ist kleiner als die Breite des Containers.
• Die Breite des Seitenansichtsfensters ist gleich oder größer als die Elementbreite.

So verhalten sich die Elemente aus dem vorherigen Beispiel, wenn sie in Ansichtsfenstern unterschiedlicher Breite angezeigt werden.





Die Breite des Elements mit dem Text Is wird



nicht verkleinert , solange auf dem Bildschirm genügend Platz für die Anzeige vorhanden ist. Wie Sie sehen können, wird das Element nicht verkleinert, sodass die Breite beibehalten wird,300pxsolange genügend Platz vorhanden ist.

Flex-Basis-Eigenschaft

Die Eigenschaft flex-basislegt die Basisgröße des Flex-Elements fest, über das es verfügt, bevor der freie Speicherplatz gemäß den durch die Eigenschaften flex-growund festgelegten Eigenschaften zugewiesen wird flex-shrink. Standardmäßig entspricht der Wert für alle Werte außer autound der Breite des Elements und bei Verwendung der Eigenschaft seiner Höhe. Die Eigenschaft akzeptiert dieselben Werte, die die Eigenschaften und annehmen können . Der Standardwert wird basierend auf dem Wert festgelegt . Der Wert wird automatisch basierend auf der Größe des Inhalts des Flex-Elements festgelegt. Wenden wir die folgenden Stile auf das Element aus unserem Beispiel an:contentflex-basisflex-direction: column



flex-basiswidthheightautocontentcontent



item-1

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
}

Nutzung der Flex-Basis-Eigenschaft: 50%



Hier wird dem ersten Element eine Eigenschaft zugewiesenflex-basis: 50%. In diesem Fall ist es wichtig, es auf eine0Eigenschaft zurückzusetzenflex-grow, damit Sie sicherstellen können, dass die Elementgröße nicht überschritten wird50%.



Was passiert, wenn Sie stattdessen einenflex-basisWertin die Eigenschaft schreiben100%? Dadurch nimmt das Element 100% der Breite des übergeordneten Elements ein und andere Elemente werden in eine neue Zeile umgebrochen.



Hier sind die relevanten Stile:

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
}

Das Ergebnis der Verwendung der Flex-Basis-Eigenschaft ist 100%;

Die Shorthand-Flex-Eigenschaft

Die Eigenschaft flexermöglicht es , in Kurzformat, um Satz Eigenschaftswerte flex-grow, flex-shrinkund flex-basis. Die Standardeinstellung für diese Eigenschaft ist auto. Es passt zusammen flex: 0 1 auto. Dies bedeutet, dass Flex-Elemente basierend auf der Größe ihres Inhalts an Größe zunehmen können.



In diesem Zusammenhang möchte ich Sie auf ein wichtiges Detail aufmerksam machen. Wir sprechen von flexiblen Artikeln mit absoluten und relativen Größen. Das hat übrigens nichts mit CSS-Positionierung zu tun . Dies gilt für das Flexbox-Modell.

Flex-Artikel mit relativen Größen

Hier ist das CSS:

.item {
    /* ,   ,  flex: 1 1 auto */
    flex: auto;
}

Hier werden Flex-Elemente nach ihrem Inhalt dimensioniert. Infolgedessen werden Elemente mit mehr Inhalt größer angezeigt.





Ein Element mit mehr Inhalt hat mehr

Flex-Artikel mit absoluten Abmessungen

Wenn die Eigenschaft im Gegensatz zum vorherigen Beispiel flex-basisauf einen Wert festgelegt ist 0, werden alle Flex-Elemente auf dieselbe Größe vergrößert.



Hier ist der Stil:

.item {
    /*  flex: 1 1 0% */
    flex: 1;
}

Artikel sind gleich groß

Flex-Eigenschaften, die ich liebe

Der Name der Eigenschaft flexweist darauf hin, dass sie mit den an sie übergebenen Werten flexibel arbeiten kann. Dies gibt ihm einige Funktionen, die ich attraktiv finde. Schauen wir uns einige Beispiele an.

▍Ein Wert ohne Einheiten

Hier ist das CSS:

.item {
    flex: 1;
}

Hier wird ein flexeinzelner Wert ohne Einheiten in die Eigenschaft geschrieben . Dieser Wert wird vom System als Wert der Eigenschaft interpretiert flex-grow. Das Äquivalent wird so aussehen flex: 1 1 0.

▍Zwei Werte ohne Einheiten

Schauen wir uns den folgenden Stil an:

.item {
    flex: 1 1;
}

Hier setzen wir ausdrücklich die Werte flex-growund jeweils flex-shrink. Dies flex-basiswird auf die Standardeinstellung zurückgesetzt.

▍Einzelwert, der eine bestimmte Größe darstellt

Lassen Sie uns darüber sprechen, wie der folgende Stil "dekodiert" wird:

.item {
    flex: 100px;
    /* flex: 1 1 100px */
}

Der Wert 100pxwird vom System als Wert behandelt flex-basis. Und in flex-growund flex-shrinkwird standardmäßig geschrieben 1.

▍Verwenden von 0 ohne Angabe von Einheiten

Angenommen, Sie möchten mithilfe der Eigenschaft flex-basiseinen Wert festlegen . Um dieses Problem zu lösen, werden wir uns dazu entschließen:0flex

.item {
    flex: 0;
}

Dies wird nicht empfohlen, da dies sowohl diejenigen, die diesen Code lesen, als auch den Browser verwirren kann. Wie zu verstehen - worauf genau bezieht sich dieser 0? Auf dem Grundstück flex-grow, flex-shrinkoder flex-basis? Im Allgemeinen stellt sich die Verwirrung heraus. In der CSS-Spezifikation heißt es dazu : Eine



Null ohne Maßeinheit, ohne zwei vorhergehende Schlankheitswerte, sollte als Schlankheitswert interpretiert werden. Um Fehlinterpretationen oder irreführende Eigenschaftsdeklarationen zu vermeiden, sollten Autoren Einheiten verwenden, wenn sie die Flex-Basis auf Null setzen, oder diesem Wert zwei Flex-Basis-Werte voranstellen.



Das heißt, um Mehrdeutigkeiten zu vermeiden, sollte der obige Code wie folgt umgeschrieben werden:

.item {
    flex: 0%;
    /* flex: 1 1 0% */
}

Hier wird eine Konstruktion verwendet 0%, aber Sie können beispielsweise eine Konstruktion verwenden 0px.

Verwenden Sie die Shorthand-Flex-Eigenschaft

Wenn Sie Eigenschaften festlegen müssen flex-grow, flex-shrinkund flex-basis, verwenden Sie dafür am besten eine Kurzform-Eigenschaft flex.



Ein kurzer Blick auf die CSS-Spezifikation :



Autoren werden aufgefordert, Flex-Elemente mithilfe der Flex-Shorthand-Eigenschaft zu verwalten, anstatt vollständig qualifizierte Eigenschaftsnamen direkt zu verwenden, da durch Anwenden der Shorthand-Eigenschaft nicht angegebene Werte korrekt auf einen Status zurückgesetzt werden, der den allgemeinen Verwendungen entspricht.

Anwendungsfälle und praktische Beispiele

▍Benutzeravatare

Ein mit der Flex-Eigenschaft konfigurierter Avatar



Das Flexbox-Modell wird häufig zum Gestalten benutzerrelevanter Seitenkomponenten verwendet. Dies betrifft beispielsweise den Avatar des Benutzers und die entsprechende Signatur, die sich in derselben Zeile befinden muss.



Hier ist das Markup:

<div class="user">
    <img class="user__avatar" src="shadeed.jpg" alt="" />
    <div>
        <h3>Ahmad Shadeed</h3>
        <p>Author of Debugging CSS</p>
    </div>
</div>

Hier ist der Stil:

.user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.user__avatar {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
}

Beachten Sie, dass ich beim Einrichten des Elements user__avatardie Eigenschaft angewendet habe flex: 0 0 70px. Dies ist wichtig, da das Bild ohne diese Einstellung in einigen veralteten Browsern möglicherweise nicht richtig angezeigt wird. Darüber hinaus ist die Priorität der Eigenschaft flexhöher als die Priorität der Eigenschaft width(in Bezug auf die Situation, in der sie angewendet wird flex-direction: row) und der Eigenschaft height(in der Situation, in der sie angewendet wird flex-direction: column).



Wenn Sie die Größe des Avatars ändern und nur die Eigenschaft betreffen flex, ignoriert der Browser die Einstellungen in der Eigenschaft width. Hier ist der relevante Stil:

.user__avatar {
    /*   100px,   70px */
    flex: 0 0 100px;
    width: 70px;
    height: 70px;
}

LementElementtitel

Element Titel



Angenommenwir brauchen Stil den Titel eines Elements. Diese Überschrift sollte den gesamten verfügbaren Platz einnehmen. Sie können dieses Problem mit der Eigenschaft lösenflex: 1:

.page-header {
    display: flex;
    flex-wrap: wrap;
}

.page-header__title {
    flex: 1;
}

▍Eingabefeld zum Vorbereiten der Nachricht

Eingabefeldfelder



wie dieses finden sich häufig in Messaging-Anwendungen wie Facebook und Twitter. Ein solches Feld sollte den gesamten verfügbaren Platz einnehmen. In diesem Fall muss die Schaltfläche zum Senden einer Nachricht eine feste Breite haben. So sieht es in CSS aus:

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

input {
    flex: 1;
    /*   */
}

Dieses Beispiel ist eine gute Demonstration der Verwendung einer Eigenschaft flex-grow.



Es ist zu beachten, dass einige Methoden zur Verwendung der Eigenschaft flexin Veröffentlichungen, die dieser Eigenschaft gewidmet sind, nicht ausreichend berücksichtigt werden. Lassen Sie uns das beheben.

▍ Richten Sie die unteren Elemente auf verschiedenen Karten aus

Das Ziel ist es, beide Daten an der roten Linie auszurichten.



Nehmen wir an, wir haben ein CSS-Grid-Layout mit zwei Spalten. Das Problem hierbei ist, dass die am Ende des Textinhalts der Karten angezeigten Daten nicht ausgerichtet sind. Und wir brauchen sie in derselben Zeile wie in der vorherigen Abbildung.



Das Flexbox-Modell kann verwendet werden, um dieses Problem zu lösen.



Hier ist das Markup:

<div class="card">
    <img src="thumb.jpg" alt="">
    <h3 class="card__title">Title short</h3>
    <time class="card__date"></time>
</div>

Sie können unser Ziel erreichen, indem Sie die Immobilie nutzen flex-direction: column. Ein Element card__title, eine Überschrift, kann so gestaltet werden, dass eine Eigenschaft angewendet wird flex-growund der gesamte verfügbare Platz belegt wird. Infolgedessen stellt sich heraus, dass die Datumszeile am unteren Rand der Karte angezeigt wird. Dies geschieht auch dann, wenn der Titel selbst kurz genug ist.



Hier sind die Stile:

.card {
    display: flex;
    flex-direction: column;
}

/*   */
.card__title {
    flex-grow: 1;
}

Dieses Problem kann gelöst werden, ohne auf die Immobilie zurückzugreifen flex-grow. Es handelt sich nämlich um die Verwendung eines Flexbox-Modells und eines Mechanismus zum automatischen Festlegen von Rändern mithilfe eines Schlüsselworts auto. Ich habe übrigens einen ausführlichen Artikel darüber geschrieben .

/*   */
.card__date {
    margin-top: auto;
}

Verwendung unterschiedlicher Werte für Schlankheitsfaktoren

In diesem Abschnitt möchte ich sprechen über Eigenschaften mit Hilfe flex-growund flex-shrinkdass sind andere Werte als zugewiesen 1. Jetzt werde ich einige praktische Beispiele für die Verwendung eines ähnlichen Schemas zum Festlegen dieser Eigenschaften geben.

▍Steuertafeln

Eine Reihe von Steuerelementen



In diesem Beispiel hat mich das Design von Facebook inspiriert (ich habe auch Symbole von dort übernommen). Das Bedienfeld (Elementactionsim folgenden Code) enthält vier Elemente. Das letzte (Elementactions__item.user) hat eine Breite, die kleiner als die Breite der anderen Elemente ist. Sie können ein solches Control Panel wie folgt erstellen:

.actions {
    display: flex;
    flex-wrap: wrap;
}

.actions__item {
    flex: 2;
}

.actions__item.user {
    flex: 1;
}

▍Animation, bei der das Element gedehnt wird

Das Element wird gedehnt, wenn Sie mit der Maus darüber fahren.



Flex-Elemente können animiert werden, wenn Sie mit der Maus darüber fahren. Diese Technik kann äußerst nützlich sein. Hier ist das relevante CSS:

.palette {
    display: flex;
    flex-wrap: wrap;
}

.palette__item {
    flex: 1;
    transition: flex 0.3s ease-out;
}

.palette__item:hover {
    flex: 4;
}

Hier finden Sie ein Video, das alles in Aktion zeigt.

▍Erhöhen Sie die Größe der aktiven Karte

Ich mag dieses Projekt auf CodePen sehr, das einen Mechanismus zum Erhöhen der Kartengröße mit einer Beschreibung des Tarifplans implementiert, auf den der Benutzer geklickt hat. Die Größe der Karte wird geändert, indem ihre Eigenschaft flex-growauf einen Wert gesetzt wird 4.





Erhöhen Sie die Größe der aktiven Karte

▍Was ist, wenn der Inhalt des Behälters größer ist als der Behälter selbst?

Artikel passen nicht in den Behälter



Vor einiger Zeit erhielt ich eine E-Mail von einem meiner Leser, der mir von einem Problem erzählte und um Hilfe bei der Lösung bat. Das Wesentliche dieses Problems ist in der vorherigen Abbildung dargestellt. Es gibt hier einige Bilder, die sich im Containerelement befinden sollten, aber diese Bilder sind größer als der Container.



Versuchen wir diesen Stil:

.wrapper {
    display: flex;
}

.wrapper img {
    flex: 1;
}

Aber selbst wenn Sie die Eigenschaften verwenden, werden die flex: 1Bilder nicht im Container platziert. Bezugnehmend auf die CSS-Spezifikation :



Flex-Elemente werden standardmäßig nicht auf weniger als die Größe ihres Inhalts (die Länge des längsten Wortes oder Elements mit fester Größe) verkleinert. Um dies zu ändern, müssen Sie die Eigenschaften min-width oder min-height verwenden.



In unserem Fall besteht das Problem darin, dass die Bilder zu groß sind, als dass das Flexbox-Modell die Größe ändern könnte, um in den Container zu passen. Sie können es so beheben:

.wrapper img {
    flex: 1;
    min-width: 0;
}

Sehen Sie diesen Artikel von mir für weitere Einzelheiten.

Ergebnis

Hier habe ich Ihnen über die Immobilie flexund deren Nutzung erzählt . Ich hoffe, Sie haben aus diesem Material etwas Neues und Nützliches gelernt.



Verwenden Sie die Flex-CSS-Eigenschaft in Ihren Projekten?