Wie bestelle ich Flex- und Grid-Artikel bei Tailwind?

In diesem Artikel wird die Methode zum Ordnen von Flex- und Grid-Elementen in Tailwind CSS erläutert.

Wie bestelle ich Flex- und Grid-Artikel bei Tailwind?

Um Flex- und Grid-Elemente in Tailwind CSS zu bestellen, erstellen Sie eine HTML-Datei. Verwenden Sie dann das Dienstprogramm „order-“ und geben Sie den Bestellwert im HTML-Programm an, um die Reihenfolge der Flex- und Grid-Elemente zu ändern. Dadurch können die Flex-Elemente in einer anderen Reihenfolge gerendert werden, als sie im DOM (Document Object Model) angezeigt werden. Um Änderungen sicherzustellen, sehen Sie sich die HTML-Webseite an.

Schauen Sie sich zum besseren Verständnis die angegebenen Schritte an:

Schritt 1: Bestellen Sie Flex- und Grid-Artikel im HTML-Programm
Erstellen Sie ein HTML-Programm und verwenden Sie das „ order- ”-Dienstprogramm und geben Sie den Bestellwert für Flex- oder Grid-Artikel an. Beispielsweise haben wir die Dienstprogramme „order-3“, „order-last“, „order-first“ und „order-2“ verwendet.

Hier:

• „ Bestellung-3 Die Klasse „Setzt die Reihenfolge des Elements auf 3 und das Flex-Element wird als drittes Element im Flex-Container positioniert.
• „ Letzte Bestellung Die Klasse „ legt die Reihenfolge des Elements so fest, dass es das letzte ist, und es wird das letzte Element im Flex-Container sein.
• „ Bestellung zuerst Die Klasse „gibt die Reihenfolge an, in der das Element an erster Stelle steht, und es wird als erstes Element im Flex-Container positioniert.
• „ Bestellung-2 Die Klasse „Setzt die Reihenfolge des Elements auf 2 und es wird als zweites Element im Flex-Container positioniert.
• „ w-32 Die Klasse „wendet 32 ​​Breiteneinheiten auf jedes Flex-Element an.
• „ m-1 Die Klasse fügt 1 Einheit Rand um jedes Flex-Element hinzu.

Schritt 2: Ausgabe überprüfen
Sehen Sie sich die HTML-Webseite an, um sicherzustellen, dass die Flex- und Grid-Artikel bestellt wurden:

Es ist zu beobachten, dass die Flex- und Grid-Artikel entsprechend ihrer Spezifikation erfolgreich bestellt wurden.

Abschluss

Um Flex- und Grid-Elemente in Tailwind CSS zu bestellen, verwenden Sie „ order- ”-Dienstprogramm und geben Sie den Bestellwert für Flex- und Grid-Elemente im HTML-Programm an. Es ordnet die Flex- und Grid-Elemente auf der Webseite neu an. Sehen Sie sich zur Überprüfung die Änderungen auf der HTML-Webseite an und stellen Sie sicher, dass die Änderungen vorgenommen wurden. In diesem Artikel wurde die Methode zum Ordnen von Flex- und Grid-Elementen in Tailwind CSS veranschaulicht.