ఈ కథనం Tailwind CSSలో ఫ్లెక్స్ మరియు గ్రిడ్ ఐటెమ్‌లను ఆర్డర్ చేసే పద్ధతిని వివరిస్తుంది.
Tailwindలో ఫ్లెక్స్ మరియు గ్రిడ్ వస్తువులను ఎలా ఆర్డర్ చేయాలి?
Tailwind CSSలో ఫ్లెక్స్ మరియు గ్రిడ్ ఐటెమ్‌లను ఆర్డర్ చేయడానికి, HTML ఫైల్‌ను రూపొందించండి. అప్పుడు, 'ఆర్డర్-' యుటిలిటీని ఉపయోగించండి మరియు ఫ్లెక్స్ మరియు గ్రిడ్ ఐటెమ్‌ల క్రమాన్ని మార్చడానికి HTML ప్రోగ్రామ్‌లో ఆర్డర్ విలువను పేర్కొనండి. ఇది ఫ్లెక్స్ ఐటెమ్‌లను DOM (డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్)లో ప్రదర్శించే క్రమంలో కాకుండా వేరే క్రమంలో రెండర్ చేయడానికి అనుమతిస్తుంది. మార్పులను నిర్ధారించడానికి, HTML వెబ్ పేజీని వీక్షించండి.
మెరుగైన అవగాహన కోసం అందించిన దశలను చూడండి:
దశ 1: HTML ప్రోగ్రామ్‌లో ఫ్లెక్స్ మరియు గ్రిడ్ అంశాలను ఆర్డర్ చేయండి
HTML ప్రోగ్రామ్‌ను రూపొందించి, 'ని ఉపయోగించండి ఆర్డర్-
< శరీరం >
< div తరగతి = 'ఫ్లెక్స్ హెచ్-20' >
< div తరగతి = 'ఆర్డర్-3 bg-red-500 w-32 m-1' > 1 < / div >
< div తరగతి = 'ఆర్డర్-లాస్ట్ bg-yellow-500 w-32 m-1' > 2 < / div >
< div తరగతి = 'ఆర్డర్-ఫస్ట్ bg-teal-500 w-32 m-1' > 3 < / div >
< div తరగతి = 'ఆర్డర్-2 bg-ఆరెంజ్-500 w-32 m-1' > 4 < / div >
< / div >
< / శరీరం >
ఇక్కడ:
- ' ఆర్డర్-3 ” క్లాస్ మూలకం యొక్క క్రమాన్ని 3కి సెట్ చేస్తుంది మరియు ఫ్లెక్స్ అంశం ఫ్లెక్స్ కంటైనర్‌లో మూడవ అంశంగా ఉంచబడుతుంది.
- ' ఆర్డర్-చివరి ” క్లాస్ మూలకం యొక్క క్రమాన్ని చివరిదిగా సెట్ చేస్తుంది మరియు ఫ్లెక్స్ కంటైనర్‌లో ఇది చివరి అంశం అవుతుంది.
- ' ఆర్డర్-ఫస్ట్ ” క్లాస్ ఎలిమెంట్ యొక్క క్రమాన్ని మొదటగా నిర్దేశిస్తుంది మరియు అది ఫ్లెక్స్ కంటైనర్‌లో మొదటి అంశంగా ఉంచబడుతుంది.
- ' ఆర్డర్-2 ” క్లాస్ మూలకం యొక్క క్రమాన్ని 2కి సెట్ చేస్తుంది మరియు అది ఫ్లెక్స్ కంటైనర్‌లో రెండవ అంశంగా ఉంచబడుతుంది.
- ' w-32 ” క్లాస్ ప్రతి ఫ్లెక్స్ ఐటెమ్‌కు 32 యూనిట్ల వెడల్పును వర్తిస్తుంది.
- ' m-1 ” క్లాస్ ప్రతి ఫ్లెక్స్ ఐటెమ్ చుట్టూ 1 యూనిట్ మార్జిన్‌ని జోడిస్తుంది.
దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
ఫ్లెక్స్ మరియు గ్రిడ్ అంశాలు ఆర్డర్ చేయబడిందని నిర్ధారించుకోవడానికి HTML వెబ్ పేజీని వీక్షించండి:
ఫ్లెక్స్ మరియు గ్రిడ్ ఐటెమ్‌లు నిర్దేశించబడిన దాని ప్రకారం విజయవంతంగా ఆర్డర్ చేయబడినట్లు గమనించవచ్చు.
ముగింపు
Tailwind CSSలో ఫ్లెక్స్ మరియు గ్రిడ్ ఐటెమ్‌లను ఆర్డర్ చేయడానికి, 'ని ఉపయోగించండి ఆర్డర్-<విలువ> ” యుటిలిటీ మరియు HTML ప్రోగ్రామ్‌లోని ఫ్లెక్స్ మరియు గ్రిడ్ ఐటెమ్‌లకు ఆర్డర్ విలువను పేర్కొనండి. ఇది వెబ్ పేజీలోని ఫ్లెక్స్ మరియు గ్రిడ్ ఐటెమ్‌లను క్రమాన్ని మార్చుతుంది. ధృవీకరణ కోసం, HTML వెబ్ పేజీలో మార్పులను వీక్షించండి మరియు మార్పులను నిర్ధారించండి. ఈ కథనం Tailwind CSSలో ఫ్లెక్స్ మరియు గ్రిడ్ ఐటెమ్‌లను ఆర్డర్ చేసే పద్ధతిని వివరించింది.