Ipapakita ng artikulong ito ang paraan ng pag-order ng mga flex at grid na item sa Tailwind CSS.
Paano Mag-order ng Flex at Grid Items sa Tailwind?
Para mag-order ng mga flex at grid na item sa Tailwind CSS, gumawa ng HTML file. Pagkatapos, gamitin ang 'order-' na utility at tukuyin ang halaga ng pagkakasunud-sunod sa HTML program upang baguhin ang pagkakasunud-sunod ng mga flex at grid item. Pinapayagan nito ang mga flex na item na mai-render sa ibang pagkakasunud-sunod kaysa sa ipinapakita ng mga ito sa DOM (Document Object Model). Upang matiyak ang mga pagbabago, tingnan ang HTML web page.
Tingnan ang ibinigay na mga hakbang para sa isang mas mahusay na pag-unawa:
Hakbang 1: Mag-order ng Flex at Grid Items sa HTML Program
Gumawa ng HTML program at gamitin ang “ order-
< katawan >
< div klase = 'flex h-20' >
< div klase = 'order-3 bg-red-500 w-32 m-1' > 1 < / div >
< div klase = 'order-huling bg-dilaw-500 w-32 m-1' > 2 < / div >
< div klase = 'order-first bg-teal-500 w-32 m-1' > 3 < / div >
< div klase = 'order-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / katawan >
dito:
- “ order-3 ” class ay nagtatakda ng pagkakasunud-sunod ng elemento sa 3 at ang flex item ay ipoposisyon bilang ang ikatlong item sa loob ng flex container.
- “ order-huling Itinakda ng klase ang pagkakasunud-sunod ng elemento na maging huli at ito ang magiging huling item sa loob ng flex container.
- “ order-una ” class ay tumutukoy sa pagkakasunud-sunod ng elemento upang mauna at ito ay ipoposisyon bilang ang unang item sa loob ng flex container.
- “ order-2 ” class ay nagtatakda ng pagkakasunud-sunod ng elemento sa 2 at ito ay ipoposisyon bilang pangalawang item sa loob ng flex container.
- “ w-32 Ang klase ay naglalapat ng 32 yunit ng lapad sa bawat flex item.
- “ m-1 ” class ay nagdaragdag ng 1 unit margin sa paligid ng bawat flex item.
Hakbang 2: I-verify ang Output
Tingnan ang HTML web page upang matiyak na ang mga flex at grid na mga item ay naayos na:
Mapapansing matagumpay na na-order ang mga flex at grid item ayon sa kung saan sila ay tinukoy.
Konklusyon
Upang mag-order ng mga flex at grid na item sa Tailwind CSS, gamitin ang “ order-