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