Tento článek bude ilustrovat způsob objednávání položek flex a grid v Tailwind CSS.
Jak objednat položky Flex a Grid ve službě Tailwind?
Chcete-li objednat položky flex a grid v Tailwind CSS, vytvořte soubor HTML. Poté použijte nástroj „order-“ a zadejte hodnotu objednávky v programu HTML, abyste změnili pořadí položek flex a grid. Umožňuje, aby se flexibilní položky vykreslovaly v jiném pořadí, než jaké se zobrazují v DOM (Document Object Model). Chcete-li zajistit změny, zobrazte webovou stránku HTML.
Pro lepší pochopení se podívejte na uvedené kroky:
Krok 1: Objednejte položky Flex a Grid v programu HTML
Vytvořte HTML program a použijte „ objednávka-
< tělo >
< div třída = 'flex h-20' >
< div třída = 'objednávka-3 bg-červená-500 w-32 m-1' > 1 < / div >
< div třída = 'poslední objednávka bg-žlutá-500 w-32 m-1' > 2 < / div >
< div třída = 'objednávka-první bg-teal-500 w-32 m-1' > 3 < / div >
< div třída = 'objednávka-2 bg-oranžová-500 w-32 m-1' > 4 < / div >
< / div >
< / tělo >
Tady:
- “ objednávka - 3 Třída ” nastaví pořadí prvku na 3 a položka Flex bude umístěna jako třetí položka v kontejneru Flex.
- “ objednávka-poslední ” nastaví pořadí prvku tak, aby bylo poslední a bude to poslední položka v kontejneru flex.
- “ objednávka-první ” třída určuje pořadí prvku, který má být první, a bude umístěn jako první položka v kontejneru flex.
- “ objednávka-2 Třída ” nastaví pořadí prvku na 2 a bude umístěn jako druhá položka v kontejneru flex.
- “ w-32 Třída ” aplikuje 32 jednotek šířky na každou položku flex.
- “ m-1 “ třída přidá 1 jednotku marže kolem každé položky flex.
Krok 2: Ověřte výstup
Prohlédněte si webovou stránku HTML a ujistěte se, že položky flex a grid byly seřazeny:
Lze pozorovat, že položky flex a grid byly úspěšně objednány podle toho, jak byly specifikovány.
Závěr
Chcete-li objednat flexibilní a mřížkové položky v Tailwind CSS, použijte „ objednávka-