CSS Flex Order

Eine Flexbox oder ein Element wird verwendet, um HTML -Inhalte darin enthalten. Eine CSS Flex -Eigenschaft wird verwendet, um die Auswirkungen flexibler Längen auf flexible Gegenstände anzuwenden. Ein Kaskadenstilblatt bietet die Eigenschaft der Bestellung an, mit der die Flexgegenstände arrangiert werden. Um die Auftragseigenschaft anzuwenden, sollten die Elemente in der Flexbox flexibel sein. Andernfalls ist die Immobilie nicht betroffen.

Flex -Kreation und -bestellung

In diesem Beispiel haben wir ein einfaches Div verwendet, um weitere Divs darin hinzuzufügen und ein Nist -Div -Phänomen zu erzeugen. Die äußere DIV ist als Flexbox für mehrere Inhalte bekannt. Ihre äußere Div ist die Hauptdiv, die mehrere Divs darin trägt. Es wird mit einer CSS -Klasse deklariert, um einige CSS -Effekte darauf anzuwenden. Diese Klasse wird im Kopfabschnitt mit dem Style -Tag beschrieben, indem ein internes CSS gebildet wird.

Im Inneren der DIV werden vier weitere Divs deklariert. Jedes DIV bezog sich auf den einzelnen Flex. Wir werden hier Inline -Styling hinzufügen, um jedem Flex Farbe zu verleihen. Jedes Div wird auch weiter mit den CSS -IDs unterhalten. Diese alle IDs sind für die Anwendung aller Auswirkungen auf den Flex verantwortlich.

CSS -IDs und Klasse

Zu diesem Zeitpunkt ist es notwendig, diese beiden Terminologien von CSS zu nähern. Wenn wir die betroffenen CSS -Eigenschaften diskutieren, spielen diese IDs und Klassen eine wesentliche Rolle bei der Anwendung von Auswirkungen auf den HTML -Inhalt. Immer wenn wir über interne und externe CSS sprechen, stoßen wir auf IDs und Klassen. Diese IDs und Klassen haben die Farbe, den Textstil, die Abmessungen und viele andere Auswirkungen auf den Inhalt im Körperabschnitt. Um auf diese Effekte aus den Klassen und IDs zuzugreifen, müssen wir erwähnen, dass sie im Content -Tag genannt werden, genau wie die ID "One". Und alle IDs vom ersten bis vierten werden ebenfalls deklariert.

Wenn wir zum HTML -Code zurückkehren, haben wir hier mit jedem internen Div oder Flex den Text verwendet, der die Reihenfolge klarer zeigt. Dies geschieht, wenn der Satz gebildet wird, indem der Flex in der entsprechenden Reihenfolge angeordnet wird. Die Bestellrichtung des Flexs ist die Wahl des Benutzers. Wir können den Flex zufällig nummerieren. Diese Flexboxen werden gebildet, wenn das CSS -Styling auf sie angewendet wird. Betrachten wir nun den CSS -Code.

Wir werden zunächst die ID erklären, die zum äußeren Div im Style -Tag gehört. Diese DIV gibt den Bereich an, in dem alle inneren Divs gebildet werden. Wir werden dieser ID Breite, Höhe und Grenzeigenschaften hinzufügen. Ein wichtiges Merkmal, das zur Bildung eines Flexs verwendet wird, ist der "Anzeige" -Effekt. Da diese Eigenschaft entfernt wird, werden einfache Rechtecke auf der Webseite gebildet. Diese Flexe werden mit dieser Anzeigeeigenschaft gebildet:

#eins
Anzeige: Flex;

Flex wird normalerweise in horizontaler Richtung von links nach rechts gebildet. Okay, das war für die äußere Div. Um allen inneren Divs oder Flex Dimensionen hinzuzufügen, verwenden wir die ID „Eins“ mit Div. Diese Eigenschaften umfassen die Breite und Höhe eines einzelnen Blocks oder Flexs. Die Höhe des einzelnen inneren Divs entspricht der Höhe der äußeren Div. Während die Breite der äußeren Div in alle vier inneren Divs unterteilt ist. Dies erfolgt durch die Deklaration der ID. Jeder Div -Name wird gemäß der Bestellung angegeben. Zum Beispiel enthält die erste Div die Reihenfolge als 1. Es spielt keine Rolle, in welcher Reihenfolge Sie den Code in CSS oder HTML deklarieren, aber die Bestellnummer entscheidet über die Reihenfolge jedes Flex.

Div#zuerst
Bestellung: 1

Schließen Sie alle Tags. Speichern Sie nun den Code mit der HTML -Erweiterung, um ihn als Text und eine Webseite zu öffnen.

Bei der Ausführung im Browser sehen Sie, dass die Reihenfolge, in der Sie jeden inneren Div oder den Flex definiert haben. Darüber hinaus zeigt der mit jedem innere Div -Tag hinzugefügte Text, dass der Satz durch Anordnen des Flexs in der Reihenfolge gebildet wird. Dies zeigt, dass die von uns erwähnte Reihenfolge genau befolgt wird.

Umgekehrte Reihenfolge von Flex

Bei der Erstellung von Flexbox und Flex ist es sichtbar, dass kein Flex -Fluss im Code erwähnt werden muss. Standardmäßig ist der Flex -Fluss in horizontaler Richtung, und die Reihenfolge wird auf die gleiche Weise befolgt, wie er beschrieben wird, dh standardmäßig aufsteigende Reihenfolge. Sobald Sie die Reihenfolge von Flex in der Flex -Kreation erklärt haben, können Sie sie umkehren, indem Sie die Richtung des Flexs erwähnen.

#eins
Flex-Richtung: Reihen-Umkehr;

Diese Eigenschaft wird der Flexbox oder der äußeren DIV hinzugefügt, da sie dafür verantwortlich ist, innere Flexe darin zu enthalten. Und wenn Sie die Standardreihenfolge verwenden möchten, entfernen Sie diese Richtung vollständig oder fügen Sie die Flex-Richtung als "Zeile" hinzu. Es wird die aufsteigende Bestellung wieder machen.

Bei der Ausführung sehen Sie, dass die gesamte Reihenfolge von Flex umgekehrt ist, Sie durch die Farben von Flex deutlich sehen können und der Satztext entsprechend umgekehrt ist.

Vertikaler Flex

Wie wir zuvor beschrieben haben, wird die Richtung von Flex nicht beschrieben. Standardmäßig befindet es sich in horizontaler Richtung mit einer einzelnen Spalte und mehreren Zeilen. Aber um einen vertikalen Flex zu machen, wird die Richtung der Flexbox von der Zeile in Spalten geändert.

#eins
Flex-Richtung: Säule;

Durch die Verwendung dieser Funktion wird eine vertikale Flexbox gebildet, wobei der gesamte Flex -Div intakt ist, und die Reihenfolge des gesamten Flexs ist derselbe.

Flexbox nachbestellen

Die Flexbox kann neu angeordnet werden. Wir haben den 3. ausgewählt, der eine Reihenfolge von -1 erhält, die Textfarbe von schwarz zu rot geändert wird und die Größe auch erhöht wird, um sie von anderen zu unterscheiden.

Dieser dritte Flex wird aus der Bestellliste entfernt. Auf diese Weise wird die Bestellung nicht aufrechterhalten. Die Box, die in die erste Position kommt.

Bei der Ausführung sehen Sie, dass der erste Block nach rechts bewegt wird, um einen Platz für die 3 zu bilden^Rd Block. Auf diese Weise können wir die Flexbox neu ordnen, indem wir einen Flex angeben.

Abschluss

In diesem Artikel haben wir versucht, die CSS -Eigenschaft Flex -Order -Eigenschaft zu beschreiben, indem wir einen Inhalt in Flexbox und Flex erstellen. Die Flex -Bestellung wird angewendet, indem Farben und Text zu dem Flex hinzugefügt werden. Darüber hinaus können wir die Reihenfolge umkehren, indem wir den Flex-Richtungstrom in umgekehrter Reihenfolge erwähnen. Die horizontale Richtung ist die Standardrichtung des Flexs; Es kann auch in vertikaler Richtung geändert werden, indem die Zeilenrichtung in der Spalte geändert wird. Alle diese Effekte werden durch die Verwendung bestimmter Codes erklärt, um das Konzept der Flex -Ordnung zu erklären.

.