ఫ్లెక్స్‌బాక్స్ లోపల వచనాన్ని నిలువుగా ఎలా సమలేఖనం చేయాలో ఈ కథనం ప్రదర్శిస్తుంది:
విధానం 1: “అలైన్-ఐటెమ్” ప్రాపర్టీని ఉపయోగించడం
వచనాన్ని నిలువుగా సమలేఖనం చేయడానికి, వినియోగదారులు “ని ఉపయోగించవచ్చు సమలేఖనం-అంశం ” CSS అందించిన ఆస్తి. ఇది ఫ్లెక్స్‌బాక్స్ లోపల వాటి అమరికను సెట్ చేయడానికి మూలకాలకు సహాయపడుతుంది. సాధ్యమయ్యే నిలువు అమరిక స్థానాలు ' టాప్ ”, మధ్య ', లేదా' దిగువన ' వైపు.
ఈ దిశలలో మూలకాలను సమలేఖనం చేయడానికి ఆచరణాత్మక ప్రదర్శనలు క్రింద పేర్కొనబడ్డాయి:
ఉదాహరణ 1: ఉన్నత స్థానం
ఎగువ స్థానంలో ఉన్న ఫ్లెక్స్‌బాక్స్ లోపల వచనాన్ని సమలేఖనం చేయడానికి, “ ఫ్లెక్స్-స్టార్ట్ 'విలువ అందించబడింది' సమలేఖనం-అంశాలు ”ఆస్తి. ఫ్లెక్స్‌గా ప్రదర్శించబడే ప్రధాన విభాగానికి ఈ ఆస్తి కేటాయించబడింది. '' తరగతితో ఉన్న div అని అనుకుందాం. నిలువుగా ” HTML ఫైల్‌లో సృష్టించబడింది. ఆపై CSS ఫైల్‌లో, ఆ తరగతిని ఎంచుకుని, క్రింది లక్షణాలను కేటాయించండి:
.నిలువుగా {
రంగు : తెలుపు ;
ఎత్తు : 150px ;
ప్రదర్శన : ఫ్లెక్స్ ;
పాడింగ్-ఎడమ : 20px ;
సమలేఖనం-అంశాలు : ఫ్లెక్స్-స్టార్ట్ ;
నేపథ్య రంగు : అటవీ ఆకుపచ్చ ;
}
- మొదట, CSS యొక్క రంగు, నేపథ్య-రంగు మరియు ఎత్తు లక్షణాలను ఉపయోగించి divకి ప్రాథమిక స్టైలింగ్ మరియు అమరిక ఇవ్వబడుతుంది.
- “డిస్‌ప్లే” ప్రాపర్టీని ఫ్లెక్స్‌బాక్స్‌గా చేయడానికి “ఫ్లెక్స్”కి కూడా సెట్ చేయబడింది.
- చివరగా, ఫ్లెక్స్‌బాక్స్ ప్రారంభంలో వచనాన్ని ప్రదర్శించడానికి, “అలైన్-ఐటెమ్స్” ప్రాపర్టీని “ఫ్లెక్స్-స్టార్ట్”కి సెట్ చేయండి.
పై కోడ్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
టెక్స్ట్ ఇప్పుడు ఫ్లెక్స్‌బాక్స్ లోపల ఎగువ స్థానంలో సమలేఖనం చేయబడిందని అవుట్‌పుట్ ప్రదర్శిస్తుంది.
ఉదాహరణ 2: మధ్యస్థ స్థానం
మధ్య స్థానంలో వచనాన్ని నిలువుగా సమలేఖనం చేయడానికి, “ని సెట్ చేయండి కేంద్రం 'CSSకి విలువ' సమలేఖనం-అంశాలు 'ఆస్తి:
.నిలువుగా {రంగు : తెలుపు ;
ఎత్తు : 150px ;
ప్రదర్శన : ఫ్లెక్స్ ;
పాడింగ్-ఎడమ : 20px ;
సమలేఖనం-అంశాలు : కేంద్రం ;
నేపథ్య రంగు : అటవీ ఆకుపచ్చ ;
}
పై కోడ్ అమలు చేసిన తర్వాత:
టెక్స్ట్ ఇప్పుడు ఫ్లెక్స్‌బాక్స్ మధ్యలో సమలేఖనం చేయబడిందని పై అవుట్‌పుట్ ప్రదర్శిస్తుంది.
ఉదాహరణ 3: దిగువ స్థానం
ఫ్లెక్స్‌బాక్స్ దిగువన వచనాన్ని సెట్ చేయడానికి, “ని కేటాయించండి flex-end ' విలువ ' సమలేఖనం-అంశాలు ”ఆస్తి. ఈసారి టెక్స్ట్ ఫ్లెక్స్‌బాక్స్ ముగిసే స్థానానికి సమలేఖనం చేయబడింది అంటే దిగువ వైపున:
.నిలువుగా {రంగు : తెలుపు ;
ఎత్తు : 150px ;
ప్రదర్శన : ఫ్లెక్స్ ;
పాడింగ్-ఎడమ : 20px ;
సమలేఖనం-అంశాలు : flex-end ;
నేపథ్య రంగు : అటవీ ఆకుపచ్చ ;
}
పై కోడ్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
ఎగువ అవుట్‌పుట్ టెక్స్ట్ ఇప్పుడు దిగువ స్థానంలో నిలువుగా సమలేఖనం చేయబడిందని ప్రదర్శిస్తుంది.
విధానం 2: “జస్టిఫై-కంటెంట్” ప్రాపర్టీని ఉపయోగించడం
ది ' జస్టిఫై-కంటెంట్ ఫ్లెక్స్‌బాక్స్ లోపల వచనాన్ని నిలువుగా సమలేఖనం చేయడానికి కూడా ప్రాపర్టీని ఉపయోగించవచ్చు. అయితే, ఇది అదే పని చేస్తుంది ' టెక్స్ట్-అలైన్ ” ఆస్తి మరియు ఇది వరుస దిశలో మూలకాలను సమలేఖనం చేస్తుంది. కాబట్టి, అమరిక యొక్క దిశను మార్చడానికి, ' ఫ్లెక్స్-దిశ 'ఆస్తి సెట్ చేయడానికి ఉపయోగించబడుతుంది' జస్టిఫై-కంటెంట్ 'వైపుకి అమరిక' కాలమ్ 'దిశ:
.నిలువుగా {ఎత్తు : 150px ;
ప్రదర్శన : ఫ్లెక్స్ ;
పాడింగ్-ఎడమ : 20px ;
రంగు : తెలుపు ;
నేపథ్య రంగు : ముదురు రంగు ;
ఫ్లెక్స్-దిశ : కాలమ్ ;
జస్టిఫై-కంటెంట్ : flex-end ;
}
పై కోడ్ యొక్క వివరణ క్రింద అందించబడింది:
- ది ' ఎత్తు ',' రంగు 'మరియు' పాడింగ్-ఎడమ ” లక్షణాలు పై పద్ధతి వలె పని చేస్తాయి.
- ఆ తరువాత, సెట్ చేయండి ' కాలమ్ ' విలువ ' ఫ్లెక్స్-దిశ నిలువు వరుసల ద్వారా శైలులను వర్తింపజేయడానికి ఫ్లెక్స్‌బాక్స్.
- ఆ తరువాత, ' జస్టిఫై-కంటెంట్ ” లక్షణం వచనాన్ని నిలువుగా సమలేఖనం చేస్తుంది.
- చివరికి, ' flex-end 'విలువ' మూలకాన్ని సమలేఖనం చేస్తుంది దిగువన ' వైపు.
గమనిక : వినియోగదారులు కూడా సెట్ చేయవచ్చు ' ఫ్లెక్స్-స్టార్ట్ 'మరియు' కేంద్రం 'విలువలు' టాప్ ', మరియు' మధ్య ” వైపులా, వరుసగా.
ఉదాహరణకు, పై కోడ్‌ని అమలు చేసిన తర్వాత వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
ఎగువ అవుట్‌పుట్ టెక్స్ట్ ఫ్లెక్స్‌బాక్స్ దిగువన సమలేఖనం చేయబడిందని ప్రదర్శిస్తుంది.
ముగింపు
ఫ్లెక్స్‌బాక్స్ లోపల వచనాన్ని నిలువుగా సమలేఖనం చేయడానికి, “ సమలేఖనం-అంశాలు 'మరియు' జస్టిఫై-కంటెంట్ ” CSS లక్షణాలను ఉపయోగించుకోవచ్చు. ఈ రెండు ఆస్తులు పొందుతాయి ' ఫ్లెక్స్-స్టార్ట్ ',' కేంద్రం 'లేదా' flex-end 'వచనాన్ని సమలేఖనం చేయడానికి విలువలు' టాప్ ',' మధ్య 'మరియు' దిగువన ఫ్లెక్స్‌బాక్స్ లోపల దిశలు వరుసగా. ఈ కథనం ఫ్లెక్స్‌బాక్స్‌లో టెక్స్ట్ యొక్క నిలువు అమరికను ప్రదర్శించింది.