CSS Flexbox పరిచయం మరియు లేఅవుట్ రూపకల్పన
CSS Flexbox (ఫ్లెక్సిబుల్ బాక్స్ లేఅవుట్) అనేది వెబ్ పేజీలలోని మూలకాలను ఒకే దిశలో (అడ్డు వరుస లేదా నిలువు వరుస) అమర్చడానికి ఉపయోగించే ఒక శక్తివంతమైన లేఅవుట్ నమూనా. దీని ద్వారా కంటైనర్లోని ఖాళీ స్థలాన్ని ఐటమ్ల మధ్య సమర్థవంతంగా పంపిణీ చేయవచ్చు. ఈ Flexbox జనరేటర్ సాధనం ద్వారా వినియోగదారులు ఒక ఫ్లెక్స్ కంటైనర్ మరియు దాని ఐటమ్లను దృశ్యమానంగా సెట్ చేయవచ్చు. నియంత్రణలను సర్దుబాటు చేస్తూ, మార్పులు లైవ్ ప్రివ్యూలో ఎలా కనిపిస్తాయో గమనించి, అవసరమైన CSS కోడ్ను సులభంగా పొందవచ్చు.
ఈ సాధనం సాధారణ లేఅవుట్ నమూనాలను రూపొందించడానికి ఉపయోగపడుతుంది:
- మధ్యలో: మూలకాలను కంటైనర్ మధ్యలోకి తీసుకురావడం.
- నావ్బార్: నావిగేషన్ బార్లను అమర్చడం.
- స్టాక్: మూలకాలను ఒకదానిపై ఒకటి నిలువుగా అమర్చడం.
- కార్డులు: గ్రిడ్ తరహాలో కార్డుల లేఅవుట్ను సృష్టించడం.
- సైడ్బార్: ప్రధాన కంటెంట్ పక్కన సైడ్బార్ను ఉంచడం.
కంటైనర్ ప్రాపర్టీలు (Container Properties)
ఫ్లెక్స్ లేఅవుట్ యొక్క ప్రాథమిక ప్రవర్తనను కంటైనర్ నియంత్రణల ద్వారా నిర్ధారించవచ్చు. ఈ సాధనంలో కింది కంటైనర్ ప్రాపర్టీలను సర్దుబాటు చేయవచ్చు:
దిశ (Direction)
ఇది ఫ్లెక్స్ ఐటమ్లు అమర్చబడే ప్రధాన అక్షాన్ని (main axis) నిర్దేశిస్తుంది.
- అడ్డు వరుస: ఐటమ్లు ఎడమ నుండి కుడికి అమర్చబడతాయి.
- అడ్డు వరుస రివర్స్: ఐటమ్లు కుడి నుండి ఎడమకు అమర్చబడతాయి.
- నిలువు వరుస: ఐటమ్లు పై నుండి క్రిందికి అమర్చబడతాయి.
- నిలువు వరుస రివర్స్: ఐటమ్లు క్రింది నుండి పైకి అమర్చబడతాయి.
ర్యాప్ (Wrap)
కంటైనర్లో స్థలం సరిపోనప్పుడు ఐటమ్లు ఒకే లైన్లో ఉండాలా లేదా తదుపరి లైన్కు వెళ్లాలా అనేది ఇది నిర్ణయిస్తుంది.
- ర్యాప్ వద్దు: ఐటమ్లన్నీ ఒకే లైన్లో ఇరుకైనవిగా మార్చబడతాయి.
- ర్యాప్: సరిపోని ఐటమ్లు తదుపరి లైన్కు పడిపోతాయి.
- ర్యాప్ రివర్స్: ఐటమ్లు రివర్స్ దిశలో తదుపరి లైన్కు వెళ్తాయి.
కంటెంట్ను జస్టిఫై చేయండి (Justify Content)
ప్రధాన అక్షం (main axis) వెంట ఐటమ్ల మధ్య ఖాళీ స్థలాన్ని ఎలా పంపిణీ చేయాలో ఇది నిర్ణయిస్తుంది.
- ప్రారంభం: ఐటమ్లు కంటైనర్ ప్రారంభంలో అమర్చబడతాయి.
- చివర: ఐటమ్లు కంటైనర్ చివరన అమర్చబడతాయి.
- మధ్యలో: ఐటమ్లు మధ్యలో కేంద్రీకరించబడతాయి.
- మధ్యలో ఖాళీ: మొదటి మరియు చివరి ఐటమ్లు చివరలకు నెట్టబడి, మిగిలిన స్థలం వాటి మధ్య సమానంగా పంచబడుతుంది.
- చుట్టూ ఖాళీ: ప్రతి ఐటమ్ చుట్టూ సమానమైన ఖాళీ కేటాయించబడుతుంది.
- సమానంగా ఖాళీ: ఐటమ్ల మధ్య మరియు కంటైనర్ అంచుల వద్ద సమానమైన ఖాళీ ఉంటుంది.
అంశాలను సమలేఖనం చేయండి (Align Items)
క్రాస్ అక్షం (cross axis) వెంట ఐటమ్లను ఎలా అమర్చాలో ఇది నిర్ణయిస్తుంది.
- ప్రారంభం, చివర, మధ్యలో.
- సాగదీయండి: ఐటమ్లు క్రాస్ అక్షం పొడవునా సాగుతాయి.
- బేస్లైన్: ఐటమ్లు వాటి టెక్స్ట్ బేస్లైన్ ఆధారంగా సమలేఖనం చేయబడతాయి.
కంటెంట్ను సమలేఖనం చేయండి (Align Content)
మల్టీ-లైన్ కంటైనర్లలో (ర్యాప్ ఆన్లో ఉన్నప్పుడు) లైన్ల మధ్య ఖాళీని ఇది సర్దుబాటు చేస్తుంది. దీని విలువలు: ప్రారంభం, చివర, మధ్యలో, సాగదీయండి, మధ్యలో ఖాళీ, చుట్టూ ఖాళీ, మరియు సమానంగా ఖాళీ.
గ్యాప్ (Gap)
ఐటమ్ల మధ్య మరియు లైన్ల మధ్య ఉండే ఖాళీని సంఖ్యాత్మక విలువతో సెట్ చేయడానికి ఇది ఉపయోగపడుతుంది.
ఐటమ్ ప్రాపర్టీలు (Item Properties)
కంటైనర్లోని ప్రతి వ్యక్తిగత ఐటమ్ యొక్క ప్రవర్తనను కూడా మార్చవచ్చు. "ఐటమ్ను జోడించు" క్లిక్ చేసినప్పుడు కొత్త ఐటమ్ (ఉదాహరణకు "Item 5") జోడించబడుతుంది. ప్రతి ఐటమ్ కోసం కింది విలువలను మార్చవచ్చు:
- క్రమం: ఐటమ్ కనిపించే క్రమాన్ని మార్చడానికి సంఖ్యా విలువను ఉపయోగిస్తారు.
- పెంచండి: కంటైనర్లో అదనపు స్థలం ఉన్నప్పుడు ఐటమ్ ఎంత మేర పెరగాలనే సంఖ్యా విలువ.
- కుదించండి: స్థలం సరిపోనప్పుడు ఐటమ్ ఎంత మేర కుదించబడాలనే సంఖ్యా విలువ.
- ప్రాతిపదిక: ఐటమ్ యొక్క ప్రారంభ పరిమాణాన్ని సూచించే సంఖ్యా విలువ లేదా "ఆటో బేసిస్".
- స్వీయ సమలేఖనం: వ్యక్తిగత ఐటమ్ కోసం క్రాస్ అక్షం సమలేఖనాన్ని మార్చడానికి ఇది ఉపయోగపడుతుంది. దీని విలువలు: ఆటో, ప్రారంభం, చివర, మధ్యలో, సాగదీయండి, బేస్లైన్.
అక్షాల పరస్పర చర్య మరియు నియమాలు
Flexbox లేఅవుట్లో ప్రధాన అక్షం (main axis) మరియు క్రాస్ అక్షం (cross axis) కీలక పాత్ర పోషిస్తాయి.
- అక్షాల మార్పు: దిశను row నుండి column కి మార్చినప్పుడు, ప్రధాన మరియు క్రాస్ అక్షాలు పరస్పరం మారుతాయి. దీనివల్ల
justify-contentమరియుalign-itemsపనిచేసే విధానం మారుతుంది. - ర్యాపింగ్ మరియు సమలేఖనం: ర్యాపింగ్ ఆఫ్లో ఉన్నప్పుడు ఐటమ్లన్నీ ఒకే లైన్కు పరిమితమవుతాయి. ర్యాపింగ్ ఆన్ చేసినప్పుడు, సరిపోని ఐటమ్లు తదుపరి లైన్కు వెళ్తాయి మరియు ఆ లైన్లను సమూహంగా అమర్చడానికి
align-contentఉపయోగపడుతుంది. - CSS జనరేషన్: మార్పులు చేసిన ఐటమ్లకు మాత్రమే ప్రత్యేకంగా CSS రూల్స్ జనరేట్ చేయబడతాయి. "CSS కాపీ చేయి" బటన్ క్లిక్ చేయగానే అది "Copied" గా మారుతుంది.
డేటా ప్రాసెసింగ్ మరియు గోప్యత
ఈ సాధనంలో మీ లేఅవుట్ రూపకల్పన పూర్తిగా సురక్షితమైనది. మీ లేఅవుట్ నేరుగా మీ బ్రౌజర్లోనే నిర్మించబడుతుంది. మీ సమాచారం ఏదీ BroBroGo కి అప్లోడ్ చేయబడదు.
తరచుగా అడిగే ప్రశ్నలు (FAQ)
justify-content మరియు align-items మధ్య తేడా ఏమిటి?
Justify-content ఐటమ్లను ప్రధాన అక్షం (main axis) వెంట — అంటే రో లేదా కాలమ్ ప్రవహించే దిశలో — అమరుస్తుంది, కాగా align-items వాటిని మరొక అక్షం (cross axis) వెంట ఉంచుతుంది. దిశను row నుండి column కి మార్చండి మరియు రెండు అక్షాలు పరస్పరం మారుతాయి, తద్వారా justify-content పై నుండి క్రిందికి మరియు align-items ఎడమ నుండి కుడికి పనిచేయడం ప్రారంభిస్తాయి.
ప్రతి ఐటమ్ నియంత్రణలు ఎలా పనిచేస్తాయి?
సంఖ్య ఆధారంగా ఒక ఐటమ్ను ఎంచుకోండి, ఆపై ఖాళీ స్థలాన్ని పూరించడానికి అది ఎంత పెరగాలి (grow), స్థలం తక్కువగా ఉన్నప్పుడు ఎంత తగ్గాలి (shrink), దాని ప్రారంభ పరిమాణం (basis) మరియు దాని స్వంత క్రాస్-యాక్సిస్ అలైన్మెంట్ను సెట్ చేయండి. Order అనేది HTMLని తాకకుండా స్క్రీన్పై ఐటమ్ను ముందుకు లేదా వెనుకకు జరుపుతుంది. మీరు మార్చిన ఐటమ్లకు మాత్రమే CSSలో వాటి స్వంత రూల్ లభిస్తుంది.
wrap మరియు align-content ఎప్పుడు అవసరమవుతాయి?
ర్యాపింగ్ ఆఫ్లో ఉన్నప్పుడు, ప్రతి ఐటమ్ ఒకే లైన్లోకి వస్తుంది మరియు ఇరుకైనదిగా మారవచ్చు. దీన్ని ఆన్ చేస్తే, సరిపోని ఐటమ్లు తదుపరి లైన్కు పడిపోతాయి — అప్పుడే align-content నియంత్రణను తీసుకుంటుంది, లైన్లను ఒక సమూహంగా అమరుస్తుంది. Gap అనేది మార్జిన్లు లేకుండా ఐటమ్ల మధ్య మరియు లైన్ల మధ్య ఖాళీని సెట్ చేస్తుంది.