Ta članek bo ponazoril metodo za naročanje elementov flex in grid v Tailwind CSS.
Kako naročiti elemente Flex in Grid v Tailwindu?
Če želite naročiti elemente flex in grid v Tailwind CSS, naredite datoteko HTML. Nato uporabite pripomoček »order-« in določite vrednost naročila v programu HTML, da spremenite vrstni red elementov flex in grid. Omogoča, da se elementi flex upodobijo v drugačnem vrstnem redu, kot so prikazani v DOM (Document Object Model). Če želite zagotoviti spremembe, si oglejte spletno stran HTML.
Za boljše razumevanje si oglejte podane korake:
1. korak: Naročite elemente Flex in Grid v programu HTML
Naredite program HTML in uporabite » order-
< telo >
< div razred = 'flex h-20' >
< div razred = 'naročilo-3 bg-rdeča-500 w-32 m-1' > 1 < / div >
< div razred = 'zadnje naročilo bg-rumena-500 w-32 m-1' > 2 < / div >
< div razred = 'prvo naročilo bg-teal-500 w-32 m-1' > 3 < / div >
< div razred = 'naročilo-2 bg-oranžna-500 w-32 m-1' > 4 < / div >
< / div >
< / telo >
Tukaj:
- “ naročilo-3 ” nastavi vrstni red elementa na 3 in flex element bo postavljen kot tretji element znotraj flex vsebnika.
- “ naročilo-zadnje ” nastavi vrstni red elementa, da je zadnji in bo zadnji element v vsebniku flex.
- “ najprej naročilo ” določa vrstni red elementa, ki naj bo prvi in bo postavljen kot prvi element v vsebniku flex.
- “ naročilo-2 ” nastavi vrstni red elementa na 2 in bo postavljen kot drugi element v vsebniku flex.
- “ w-32 ” razred uporabi 32 enot širine za vsak flex element.
- “ m-1 ” doda rob 1 enote okoli vsakega elementa flex.
2. korak: Preverite izhod
Oglejte si spletno stran HTML in se prepričajte, da so bili predmeti flex in grid urejeni:
Opazimo lahko, da so bili elementi flex in grid uspešno naročeni glede na to, kar so bili določeni.
Zaključek
Za naročanje upogibnih in mrežnih elementov v Tailwind CSS uporabite » naročilo-