CSS ఫ్లెక్స్‌బాక్స్ యొక్క అంతర్గత సైజింగ్ అల్గారిథమ్‌ను అర్థం చేసుకోవడం ద్వారా దాని శక్తిని అన్‌లాక్ చేయండి. ఈ గైడ్ కంటెంట్-ఆధారిత సైజింగ్, ఫ్లెక్స్-బేసిస్, గ్రో, ష్రింక్ మరియు సాధారణ లేఅవుట్ సవాళ్లను ప్రపంచ డెవలపర్‌ల కోసం వివరిస్తుంది.
ఫ్లెక్స్‌బాక్స్ సైజింగ్ అల్గారిథమ్‌ను సులభతరం చేయడం: కంటెంట్-ఆధారిత లేఅవుట్‌లపై ఒక లోతైన విశ్లేషణ
మీరు ఎప్పుడైనా ఐటెమ్స్ సెట్‌పై flex: 1 ఉపయోగించి, సరిగ్గా సమానమైన కాలమ్స్ ఆశించి, అవి ఇప్పటికీ వేర్వేరు పరిమాణాలలో ఉన్నాయని కనుగొన్నారా? లేదా ఒక ఫ్లెక్స్ ఐటెమ్ మొండిగా కుదించడానికి నిరాకరించడంతో, మీ డిజైన్‌ను పాడుచేసే ఒక అసహ్యకరమైన ఓవర్‌ఫ్లోతో మీరు పోరాడారా? ఈ సాధారణ నిరాశలు తరచుగా డెవలపర్‌లను ఊహాగానాలు మరియు యాదృచ్ఛిక ప్రాపర్టీ మార్పుల చక్రంలోకి నడిపిస్తాయి. అయితే, పరిష్కారం మాయాజాలం కాదు; అది తర్కం.
ఈ చిక్కుముడులకు సమాధానం CSS స్పెసిఫికేషన్‌లో లోతుగా ఉంది, దీనిని ఫ్లెక్స్‌బాక్స్ ఇంట్రిన్సిక్ సైజింగ్ అల్గారిథమ్ అని పిలుస్తారు. ఇది ఫ్లెక్స్‌బాక్స్‌ను నడిపించే శక్తివంతమైన, కంటెంట్-అవగాహన ఇంజిన్, కానీ దాని అంతర్గత తర్కం తరచుగా అపారదర్శక బ్లాక్ బాక్స్ లాగా అనిపిస్తుంది. ఈ అల్గారిథమ్‌ను అర్థం చేసుకోవడం ఫ్లెక్స్‌బాక్స్‌పై పట్టు సాధించడానికి మరియు నిజంగా ఊహించదగిన, స్థితిస్థాపకమైన యూజర్ ఇంటర్‌ఫేస్‌లను నిర్మించడానికి కీలకం.
ఈ గైడ్ ప్రపంచవ్యాప్తంగా ఉన్న డెవలపర్‌ల కోసం, వారు ఫ్లెక్స్‌బాక్స్‌తో "ప్రయత్నం మరియు దోషం" నుండి "ఉద్దేశపూర్వక డిజైన్"కి మారాలనుకుంటున్నారు. మేము ఈ శక్తివంతమైన అల్గారిథమ్‌ను దశలవారీగా విడదీస్తాము, గందరగోళాన్ని స్పష్టతగా మారుస్తాము మరియు ఏ కంటెంట్‌కైనా, ఏ భాషలోనైనా పనిచేసే మరింత దృఢమైన మరియు ప్రపంచవ్యాప్తంగా అవగాహన ఉన్న లేఅవుట్‌లను నిర్మించడానికి మీకు అధికారం ఇస్తాము.
స్థిర పిక్సెల్‌లకు అతీతంగా: ఇంట్రిన్సిక్ వర్సెస్ ఎక్స్‌ట్రిన్సిక్ సైజింగ్‌ను అర్థం చేసుకోవడం
అల్గారిథమ్‌లోకి ప్రవేశించే ముందు, CSS లేఅవుట్‌లో ఒక ప్రాథమిక భావనను అర్థం చేసుకోవడం చాలా ముఖ్యం: ఇంట్రిన్సిక్ మరియు ఎక్స్‌ట్రిన్సిక్ సైజింగ్ మధ్య వ్యత్యాసం.
- ఎక్స్‌ట్రిన్సిక్ సైజింగ్: ఇది మీరు, డెవలపర్, ఒక ఎలిమెంట్ యొక్క పరిమాణాన్ని స్పష్టంగా నిర్వచించినప్పుడు.
width: 500px,height: 50%, లేదాwidth: 30remవంటి ప్రాపర్టీలు ఎక్స్‌ట్రిన్సిక్ సైజింగ్‌కు ఉదాహరణలు. పరిమాణం ఎలిమెంట్ కంటెంట్‌కు బాహ్య కారకాలచే నిర్ణయించబడుతుంది. - ఇంట్రిన్సిక్ సైజింగ్: ఇది బ్రౌజర్ ఒక ఎలిమెంట్ యొక్క పరిమాణాన్ని దానిలో ఉన్న కంటెంట్ ఆధారంగా లెక్కించినప్పుడు. పొడవైన టెక్స్ట్ లేబుల్‌కు అనుగుణంగా సహజంగా వెడల్పుగా పెరిగే ఒక బటన్ ఇంట్రిన్సిక్ సైజింగ్‌ను ఉపయోగిస్తుంది. పరిమాణం ఎలిమెంట్‌కు అంతర్గత కారకాలచే నిర్ణయించబడుతుంది.
ఫ్లెక్స్‌బాక్స్ ఇంట్రిన్సిక్, కంటెంట్-ఆధారిత సైజింగ్‌లో ఒక మాస్టర్. మీరు నియమాలను (ఫ్లెక్స్ ప్రాపర్టీలు) అందించినప్పటికీ, బ్రౌజర్ ఫ్లెక్స్ ఐటెమ్‌ల కంటెంట్ మరియు కంటైనర్‌లో అందుబాటులో ఉన్న స్థలం ఆధారంగా తుది సైజింగ్ నిర్ణయాలు తీసుకుంటుంది. ఫ్లూయిడ్, రెస్పాన్సివ్ డిజైన్‌లను సృష్టించడానికి ఇది చాలా శక్తివంతంగా చేస్తుంది.
ఫ్లెక్సిబిలిటీకి మూడు స్తంభాలు: `flex-basis`, `flex-grow`, మరియు `flex-shrink` పై ఒక పునశ్చరణ
ఫ్లెక్స్‌బాక్స్ అల్గారిథమ్ యొక్క నిర్ణయాలు ప్రధానంగా మూడు ప్రాపర్టీల ద్వారా మార్గనిర్దేశం చేయబడతాయి, వీటిని తరచుగా flex షార్ట్‌హ్యాండ్ ఉపయోగించి సెట్ చేస్తారు. తదుపరి దశలను అర్థం చేసుకోవడానికి వీటిపై గట్టి పట్టు తప్పనిసరి.
1. `flex-basis`: ప్రారంభ రేఖ
flex-basisను ఏదైనా పెరగడం లేదా తగ్గడం జరగడానికి ముందు ప్రధాన అక్షం వెంట ఒక ఫ్లెక్స్ ఐటెమ్ యొక్క ఆదర్శవంతమైన లేదా "ఊహాత్మక" ప్రారంభ పరిమాణంగా భావించండి. ఇది అన్ని ఇతర గణనలకు ఆధార రేఖ.
- ఇది ఒక పొడవు (ఉదా.,
100px,10rem) లేదా శాతం (25%) కావచ్చు. - డిఫాల్ట్ విలువ
auto.autoకు సెట్ చేసినప్పుడు, బ్రౌజర్ మొదట ఐటెమ్ యొక్క ప్రధాన సైజ్ ప్రాపర్టీని (క్షితిజ సమాంతర ఫ్లెక్స్ కంటైనర్ కోసంwidth, నిలువు దాని కోసంheight) చూస్తుంది. - ఇక్కడ కీలకమైన లింక్ ఉంది: ప్రధాన సైజ్ ప్రాపర్టీ కూడా
autoఅయితే,flex-basisఐటెమ్ యొక్క ఇంట్రిన్సిక్, కంటెంట్-ఆధారిత పరిమాణానికి పరిష్కరించబడుతుంది. ఈ విధంగా కంటెంట్ స్వయంగా ప్రారంభం నుండి సైజింగ్ ప్రక్రియలో ఒక ఓటును పొందుతుంది. contentవిలువ కూడా అందుబాటులో ఉంది, ఇది బ్రౌజర్‌కు ఇంట్రిన్సిక్ సైజ్‌ను ఉపయోగించమని స్పష్టంగా చెబుతుంది.
2. `flex-grow`: పాజిటివ్ స్పేస్‌ను క్లెయిమ్ చేయడం
flex-grow ప్రాపర్టీ అనేది ఒక యూనిట్‌లెస్ సంఖ్య, ఇది ఫ్లెక్స్ కంటైనర్‌లోని పాజిటివ్ ఖాళీ స్థలంలో ఒక ఐటెమ్ దాని తోబుట్టువులతో పోలిస్తే ఎంత గ్రహించాలో నిర్దేశిస్తుంది. ఫ్లెక్స్ కంటైనర్ దాని అన్ని ఐటెమ్‌ల `flex-basis` విలువల మొత్తం కంటే పెద్దగా ఉన్నప్పుడు పాజిటివ్ ఖాళీ స్థలం ఉంటుంది.
- డిఫాల్ట్ విలువ
0, అంటే ఐటెమ్‌లు డిఫాల్ట్‌గా పెరగవు. - అన్ని ఐటెమ్‌లకు
flex-grow: 1ఉంటే, మిగిలిన స్థలం వాటి మధ్య సమానంగా పంపిణీ చేయబడుతుంది. - ఒక ఐటెమ్‌కు
flex-grow: 2మరియు ఇతరులకుflex-grow: 1ఉంటే, మొదటి ఐటెమ్ ఇతరుల కంటే రెట్టింపు అందుబాటులో ఉన్న ఖాళీ స్థలాన్ని పొందుతుంది.
3. `flex-shrink`: నెగెటివ్ స్పేస్‌ను అంగీకరించడం
flex-shrink ప్రాపర్టీ flex-growకు ప్రతిరూపం. ఇది ఒక యూనిట్‌లెస్ సంఖ్య, ఇది కంటైనర్ దాని అన్ని ఐటెమ్‌ల `flex-basis`కు సరిపోయేంత చిన్నగా ఉన్నప్పుడు ఒక ఐటెమ్ స్థలాన్ని ఎలా వదులుకోవాలో నియంత్రిస్తుంది. ఇది తరచుగా ఈ మూడింటిలో అత్యంత తప్పుగా అర్థం చేసుకోబడినది.
- డిఫాల్ట్ విలువ
1, అంటే అవసరమైతే ఐటెమ్‌లు డిఫాల్ట్‌గా కుదించడానికి అనుమతించబడతాయి. - ఒక సాధారణ అపోహ ఏమిటంటే,
flex-shrink: 2ఒక ఐటెమ్‌ను సాధారణ అర్థంలో "రెట్టింపు వేగంగా" కుదించేలా చేస్తుంది. ఇది మరింత సూక్ష్మమైనది: ఒక ఐటెమ్ కుదించే మొత్తం దాని `flex-shrink` ఫ్యాక్టర్ మరియు దాని `flex-basis` గుణకారానికి అనులోమానుపాతంలో ఉంటుంది. ఈ కీలకమైన వివరాలను తరువాత ఒక ఆచరణాత్మక ఉదాహరణతో అన్వేషిస్తాము.
ఫ్లెక్స్‌బాక్స్ సైజింగ్ అల్గారిథమ్: ఒక దశల వారీ విచ్ఛిన్నం
ఇప్పుడు, మనం తెర వెనుకకు వెళ్లి బ్రౌజర్ యొక్క ఆలోచనా ప్రక్రియను పరిశీలిద్దాం. అధికారిక W3C స్పెసిఫికేషన్ చాలా సాంకేతికంగా మరియు ఖచ్చితంగా ఉన్నప్పటికీ, మనం ఒకే ఫ్లెక్స్ లైన్ కోసం కోర్ లాజిక్‌ను మరింత సులభంగా జీర్ణమయ్యే, వరుస నమూనాగా సరళీకరించవచ్చు.
దశ 1: ఫ్లెక్స్ బేస్ సైజ్‌లను మరియు ఊహాత్మక ప్రధాన సైజ్‌లను నిర్ధారించడం
మొదట, బ్రౌజర్‌కు ప్రతి ఐటెమ్‌కు ఒక ప్రారంభ స్థానం అవసరం. ఇది కంటైనర్‌లోని ప్రతి ఐటెమ్‌కు ఫ్లెక్స్ బేస్ సైజ్‌ను లెక్కిస్తుంది. ఇది ప్రధానంగా flex-basis ప్రాపర్టీ యొక్క పరిష్కరించబడిన విలువ ద్వారా నిర్ణయించబడుతుంది. ఈ ఫ్లెక్స్ బేస్ సైజ్ తదుపరి దశల కోసం ఐటెమ్ యొక్క "ఊహాత్మక ప్రధాన సైజ్" అవుతుంది. ఇది దాని తోబుట్టువులతో ఏదైనా చర్చలకు ముందు ఐటెమ్ *ఉండాలనుకుంటున్న* పరిమాణం.
దశ 2: ఫ్లెక్స్ కంటైనర్ యొక్క ప్రధాన సైజ్‌ను నిర్ధారించడం
తరువాత, బ్రౌజర్ ఫ్లెక్స్ కంటైనర్ యొక్క పరిమాణాన్ని దాని ప్రధాన అక్షం వెంట లెక్కిస్తుంది. ఇది మీ CSS నుండి ఒక స్థిర వెడల్పు కావచ్చు, దాని పేరెంట్ యొక్క శాతంగా ఉండవచ్చు, లేదా అది దాని స్వంత కంటెంట్ ద్వారా అంతర్గతంగా పరిమాణం చేయబడవచ్చు. ఈ తుది, ఖచ్చితమైన పరిమాణం ఫ్లెక్స్ ఐటెమ్‌లు పని చేయడానికి అందుబాటులో ఉన్న స్థలం యొక్క "బడ్జెట్".
దశ 3: ఫ్లెక్స్ ఐటెమ్‌లను ఫ్లెక్స్ లైన్‌లలోకి సేకరించడం
అప్పుడు బ్రౌజర్ ఐటెమ్‌లను ఎలా సమూహపరచాలో నిర్ణయిస్తుంది. flex-wrap: nowrap (డిఫాల్ట్) సెట్ చేయబడితే, అన్ని ఐటెమ్‌లు ఒకే లైన్‌లో భాగంగా పరిగణించబడతాయి. flex-wrap: wrap లేదా wrap-reverse యాక్టివ్‌గా ఉంటే, బ్రౌజర్ ఐటెమ్‌లను ఒకటి లేదా అంతకంటే ఎక్కువ లైన్‌లలో పంపిణీ చేస్తుంది. అల్గారిథమ్ యొక్క మిగిలిన భాగం ప్రతి లైన్‌లోని ఐటెమ్‌లకు స్వతంత్రంగా వర్తింపజేయబడుతుంది.
దశ 4: ఫ్లెక్సిబుల్ లెంగ్త్‌లను పరిష్కరించడం (కోర్ లాజిక్)
ఇది అల్గారిథమ్ యొక్క గుండె, ఇక్కడ అసలు సైజింగ్ మరియు పంపిణీ జరుగుతుంది. ఇది రెండు-భాగాల ప్రక్రియ.
భాగం 4a: ఖాళీ స్థలాన్ని లెక్కించడం
బ్రౌజర్ ఒక ఫ్లెక్స్ లైన్‌లో అందుబాటులో ఉన్న మొత్తం ఖాళీ స్థలాన్ని లెక్కిస్తుంది. ఇది కంటైనర్ యొక్క ప్రధాన సైజ్ (దశ 2 నుండి) నుండి అన్ని ఐటెమ్‌ల ఫ్లెక్స్ బేస్ సైజ్‌ల (దశ 1 నుండి) మొత్తాన్ని తీసివేయడం ద్వారా చేస్తుంది.
ఖాళీ స్థలం = కంటైనర్ యొక్క ప్రధాన సైజ్ - అన్ని ఐటెమ్‌ల ఫ్లెక్స్ బేస్ సైజ్‌ల మొత్తం
ఈ ఫలితం ఇలా ఉండవచ్చు:
- పాజిటివ్: కంటైనర్‌లో ఐటెమ్‌లకు అవసరమైన దానికంటే ఎక్కువ స్థలం ఉంది. ఈ అదనపు స్థలం
flex-growఉపయోగించి పంపిణీ చేయబడుతుంది. - నెగెటివ్: ఐటెమ్‌లు సమిష్టిగా కంటైనర్ కంటే పెద్దవిగా ఉన్నాయి. ఈ స్థలం యొక్క కొరత (ఒక ఓవర్‌ఫ్లో) అంటే ఐటెమ్‌లు వాటి
flex-shrinkవిలువల ప్రకారం కుదించాలి. - సున్నా: ఐటెమ్‌లు సరిగ్గా సరిపోతాయి. పెరగడం లేదా తగ్గడం అవసరం లేదు.
భాగం 4b: ఖాళీ స్థలాన్ని పంపిణీ చేయడం
ఇప్పుడు, బ్రౌజర్ లెక్కించిన ఖాళీ స్థలాన్ని పంపిణీ చేస్తుంది. ఇది ఒక పునరావృత ప్రక్రియ, కానీ మనం లాజిక్‌ను సంగ్రహించవచ్చు:
- ఖాళీ స్థలం పాజిటివ్ అయితే (పెరుగుతున్నప్పుడు):
- బ్రౌజర్ లైన్‌లోని ఐటెమ్‌ల అన్ని
flex-growఫ్యాక్టర్‌లను కలుపుతుంది. - అప్పుడు అది పాజిటివ్ ఖాళీ స్థలాన్ని ప్రతి ఐటెమ్‌కు అనుపాతంలో పంపిణీ చేస్తుంది. ఒక ఐటెమ్ పొందే స్థలం:
(ఐటెమ్ యొక్క flex-grow / అన్ని flex-grow ఫ్యాక్టర్‌ల మొత్తం) * పాజిటివ్ ఖాళీ స్థలం. - ఒక ఐటెమ్ యొక్క తుది పరిమాణం దాని
flex-basisమరియు పంపిణీ చేయబడిన స్థలంలో దాని వాటా. ఈ పెరుగుదల ఐటెమ్ యొక్కmax-widthలేదాmax-heightప్రాపర్టీ ద్వారా పరిమితం చేయబడుతుంది.
- బ్రౌజర్ లైన్‌లోని ఐటెమ్‌ల అన్ని
- ఖాళీ స్థలం నెగెటివ్ అయితే (కుదించేటప్పుడు):
- ఇది మరింత సంక్లిష్టమైన భాగం. ప్రతి ఐటెమ్ కోసం, బ్రౌజర్ దాని ఫ్లెక్స్ బేస్ సైజ్‌ను దాని
flex-shrinkవిలువతో గుణించడం ద్వారా ఒక వెయిటెడ్ ష్రింక్ ఫ్యాక్టర్‌ను లెక్కిస్తుంది:వెయిటెడ్ ష్రింక్ ఫ్యాక్టర్ = ఫ్లెక్స్ బేస్ సైజ్ * flex-shrink. - అప్పుడు అది ఈ వెయిటెడ్ ష్రింక్ ఫ్యాక్టర్‌లన్నింటినీ కలుపుతుంది.
- నెగెటివ్ స్పేస్ (ఓవర్‌ఫ్లో మొత్తం) ఈ వెయిటెడ్ ఫ్యాక్టర్ ఆధారంగా ప్రతి ఐటెమ్‌కు అనుపాతంలో పంపిణీ చేయబడుతుంది. ఒక ఐటెమ్ కుదించే మొత్తం:
(ఐటెమ్ యొక్క వెయిటెడ్ ష్రింక్ ఫ్యాక్టర్ / అన్ని వెయిటెడ్ ష్రింక్ ఫ్యాక్టర్‌ల మొత్తం) * నెగెటివ్ ఖాళీ స్థలం. - ఒక ఐటెమ్ యొక్క తుది పరిమాణం దాని
flex-basisమైనస్ పంపిణీ చేయబడిన నెగెటివ్ స్థలంలో దాని వాటా. ఈ కుదింపు ఐటెమ్ యొక్కmin-widthలేదాmin-heightప్రాపర్టీ ద్వారా పరిమితం చేయబడుతుంది, ఇది కీలకంగాautoకు డిఫాల్ట్ అవుతుంది.
- ఇది మరింత సంక్లిష్టమైన భాగం. ప్రతి ఐటెమ్ కోసం, బ్రౌజర్ దాని ఫ్లెక్స్ బేస్ సైజ్‌ను దాని
దశ 5: ప్రధాన-అక్షం అమరిక
అన్ని ఐటెమ్‌ల తుది పరిమాణాలు నిర్ధారించబడిన తర్వాత, బ్రౌజర్ కంటైనర్‌లో ప్రధాన అక్షం వెంట ఐటెమ్‌లను అమర్చడానికి justify-content ప్రాపర్టీని ఉపయోగిస్తుంది. ఇది అన్ని సైజింగ్ గణనలు పూర్తయిన *తర్వాత* జరుగుతుంది.
ఆచరణాత్మక దృశ్యాలు: సిద్ధాంతం నుండి వాస్తవికతకు
సిద్ధాంతాన్ని అర్థం చేసుకోవడం ఒక విషయం; దానిని ఆచరణలో చూడటం జ్ఞానాన్ని పటిష్టం చేస్తుంది. మన అల్గారిథమ్ అవగాహనతో ఇప్పుడు సులభంగా వివరించగల కొన్ని సాధారణ దృశ్యాలను పరిష్కరిద్దాం.
దృశ్యం 1: నిజమైన సమాన కాలమ్‌లు మరియు `flex: 1` షార్ట్‌హ్యాండ్
సమస్య: మీరు అన్ని ఐటెమ్‌లకు flex-grow: 1 వర్తింపజేస్తారు కానీ అవి సమాన వెడల్పులతో ముగియవు.
వివరణ: ఇది మీరు flex: auto (ఇది flex: 1 1 autoకు విస్తరిస్తుంది) వంటి షార్ట్‌హ్యాండ్‌ను ఉపయోగించినప్పుడు లేదా flex-basisను దాని డిఫాల్ట్ autoలో వదిలివేసి flex-grow: 1 సెట్ చేసినప్పుడు జరుగుతుంది. అల్గారిథమ్ ప్రకారం, flex-basis: auto ఐటెమ్ యొక్క కంటెంట్ సైజ్‌కు పరిష్కరించబడుతుంది. కాబట్టి, ఎక్కువ కంటెంట్ ఉన్న ఐటెమ్ పెద్ద ఫ్లెక్స్ బేస్ సైజ్‌తో ప్రారంభమవుతుంది. మిగిలిన ఖాళీ స్థలం సమానంగా పంపిణీ చేయబడినప్పటికీ, ఐటెమ్‌ల ప్రారంభ స్థానాలు వేర్వేరుగా ఉన్నందున వాటి తుది పరిమాణాలు భిన్నంగా ఉంటాయి.
పరిష్కారం: flex: 1 షార్ట్‌హ్యాండ్‌ను ఉపయోగించండి. ఇది flex: 1 1 0%కు విస్తరిస్తుంది. ఇక్కడ కీలకం flex-basis: 0%. ఇది ప్రతి ఐటెమ్‌ను 0 యొక్క ఊహాత్మక బేస్ సైజ్‌తో ప్రారంభించమని బలవంతం చేస్తుంది. కంటైనర్ యొక్క మొత్తం వెడల్పు "పాజిటివ్ ఖాళీ స్థలం" అవుతుంది. అన్ని ఐటెమ్‌లకు flex-grow: 1 ఉన్నందున, ఈ మొత్తం స్థలం వాటి మధ్య సమానంగా పంపిణీ చేయబడుతుంది, ఫలితంగా వాటి కంటెంట్‌తో సంబంధం లేకుండా నిజంగా సమాన-వెడల్పు కాలమ్‌లు ఏర్పడతాయి.
దృశ్యం 2: `flex-shrink` అనుపాత పజిల్
సమస్య: మీకు రెండు ఐటెమ్‌లు ఉన్నాయి, రెండూ flex-shrink: 1తో ఉన్నాయి, కానీ కంటైనర్ కుదించినప్పుడు, ఒక ఐటెమ్ మరొక దాని కంటే చాలా ఎక్కువ వెడల్పును కోల్పోతుంది.
వివరణ: ఇది నెగెటివ్ స్పేస్ కోసం దశ 4b యొక్క ఖచ్చితమైన ఉదాహరణ. కుదించడం కేవలం flex-shrink ఫ్యాక్టర్‌పై ఆధారపడి ఉండదు; ఇది ఐటెమ్ యొక్క flex-basis ద్వారా వెయిట్ చేయబడుతుంది. ఒక పెద్ద ఐటెమ్‌కు "వదులుకోవడానికి" ఎక్కువ ఉంటుంది.
రెండు ఐటెమ్‌లతో 500px కంటైనర్‌ను పరిగణించండి:
- ఐటెమ్ A:
flex: 0 1 400px;(400px బేస్ సైజ్) - ఐటెమ్ B:
flex: 0 1 200px;(200px బేస్ సైజ్)
మొత్తం బేస్ సైజ్ 600px, ఇది కంటైనర్‌కు 100px చాలా పెద్దది (100px నెగెటివ్ స్పేస్).
- ఐటెమ్ A యొక్క వెయిటెడ్ ష్రింక్ ఫ్యాక్టర్:
400px * 1 = 400 - ఐటెమ్ B యొక్క వెయిటెడ్ ష్రింక్ ఫ్యాక్టర్:
200px * 1 = 200 - మొత్తం వెయిటెడ్ ఫ్యాక్టర్‌లు:
400 + 200 = 600
ఇప్పుడు, 100px నెగెటివ్ స్పేస్‌ను పంపిణీ చేయండి:
- ఐటెమ్ A కుదించేది:
(400 / 600) * 100px = ~66.67px - ఐటెమ్ B కుదించేది:
(200 / 600) * 100px = ~33.33px
రెండూ flex-shrink: 1 కలిగి ఉన్నప్పటికీ, పెద్ద ఐటెమ్ దాని బేస్ సైజ్ రెట్టింపు పెద్దది కాబట్టి రెట్టింపు వెడల్పును కోల్పోయింది. అల్గారిథమ్ సరిగ్గా డిజైన్ చేసిన విధంగా ప్రవర్తించింది.
దృశ్యం 3: కుదించలేని ఐటెమ్ మరియు `min-width: 0` పరిష్కారం
సమస్య: మీకు పొడవైన టెక్స్ట్ స్ట్రింగ్ (ఒక URL వంటిది) లేదా పెద్ద ఇమేజ్‌తో ఒక ఐటెమ్ ఉంది, మరియు అది ఒక నిర్దిష్ట పరిమాణం కంటే తక్కువకు కుదించడానికి నిరాకరిస్తుంది, దానివల్ల అది కంటైనర్‌ను ఓవర్‌ఫ్లో చేస్తుంది.
వివరణ: కుదించే ప్రక్రియ ఐటెమ్ యొక్క కనీస పరిమాణం ద్వారా పరిమితం చేయబడుతుందని గుర్తుంచుకోండి. డిఫాల్ట్‌గా, ఫ్లెక్స్ ఐటెమ్‌లు min-width: auto కలిగి ఉంటాయి. టెక్స్ట్ లేదా ఇమేజ్‌లను కలిగి ఉన్న ఎలిమెంట్ కోసం, ఈ auto విలువ దాని ఇంట్రిన్సిక్ కనీస పరిమాణానికి పరిష్కరించబడుతుంది. టెక్స్ట్ కోసం, ఇది తరచుగా పొడవైన విడదీయరాని పదం లేదా స్ట్రింగ్ యొక్క వెడల్పు. ఫ్లెక్స్ అల్గారిథమ్ ఐటెమ్‌ను కుదిస్తుంది, కానీ అది ఈ లెక్కించిన కనీస వెడల్పును తాకిన తర్వాత ఆగిపోతుంది, ఇప్పటికీ తగినంత స్థలం లేకపోతే ఓవర్‌ఫ్లోకి దారితీస్తుంది.
పరిష్కారం: ఒక ఐటెమ్‌ను దాని ఇంట్రిన్సిక్ కంటెంట్ సైజ్ కంటే చిన్నగా కుదించడానికి అనుమతించడానికి, మీరు ఈ డిఫాల్ట్ ప్రవర్తనను ఓవర్‌రైడ్ చేయాలి. అత్యంత సాధారణ పరిష్కారం ఫ్లెక్స్ ఐటెమ్‌కు min-width: 0 వర్తింపజేయడం. ఇది బ్రౌజర్‌కు, "అవసరమైతే ఈ ఐటెమ్‌ను సున్నా వెడల్పు వరకు కుదించడానికి మీకు నా అనుమతి ఉంది," అని చెబుతుంది, తద్వారా ఓవర్‌ఫ్లోను నివారిస్తుంది.
ఇంట్రిన్సిక్ సైజింగ్ యొక్క గుండె: `min-content` మరియు `max-content`
కంటెంట్-ఆధారిత సైజింగ్‌ను పూర్తిగా గ్రహించడానికి, మనం రెండు సంబంధిత కీవర్డ్‌లను త్వరగా నిర్వచించాలి:
max-content: ఒక ఎలిమెంట్ యొక్క ఇంట్రిన్సిక్ ప్రాధాన్య వెడల్పు. టెక్స్ట్ కోసం, అది అనంతమైన స్థలం ఉంటే మరియు ఎప్పుడూ ర్యాప్ చేయనవసరం లేకుంటే టెక్స్ట్ తీసుకునే వెడల్పు.min-content: ఒక ఎలిమెంట్ యొక్క ఇంట్రిన్సిక్ కనీస వెడల్పు. టెక్స్ట్ కోసం, ఇది దాని పొడవైన విడదీయరాని స్ట్రింగ్ (ఉదా., ఒకే పొడవైన పదం) యొక్క వెడల్పు. ఇది దాని స్వంత కంటెంట్ ఓవర్‌ఫ్లో కాకుండా అది పొందగల అతి చిన్నది.
flex-basis auto అయినప్పుడు మరియు ఐటెమ్ యొక్క width కూడా auto అయినప్పుడు, బ్రౌజర్ తప్పనిసరిగా max-content సైజ్‌ను ఐటెమ్ యొక్క ప్రారంభ ఫ్లెక్స్ బేస్ సైజ్‌గా ఉపయోగిస్తుంది. అందుకే ఫ్లెక్స్ అల్గారిథమ్ ఖాళీ స్థలాన్ని పంపిణీ చేయడం ప్రారంభించడానికి ముందే ఎక్కువ కంటెంట్ ఉన్న ఐటెమ్‌లు పెద్దగా ప్రారంభమవుతాయి.
ప్రపంచవ్యాప్త ప్రభావాలు మరియు పనితీరు
ఈ కంటెంట్-ఆధారిత విధానం ప్రపంచవ్యాప్త ప్రేక్షకులకు మరియు పనితీరు-క్లిష్టమైన అప్లికేషన్‌లకు ముఖ్యమైన పరిగణనలను కలిగి ఉంది.
అంతర్జాతీయీకరణ (i18n) ముఖ్యం
అంతర్జాతీయ వెబ్‌సైట్‌లకు కంటెంట్-ఆధారిత సైజింగ్ రెండు వైపులా పదునున్న కత్తి. ఒక వైపు, బటన్ లేబుల్స్ మరియు శీర్షికల పొడవు బాగా మారే వివిధ భాషలకు లేఅవుట్‌లు అనుగుణంగా ఉండటానికి ఇది అద్భుతమైనది. మరోవైపు, ఇది ఊహించని లేఅవుట్ బ్రేక్‌లను పరిచయం చేయవచ్చు.
జర్మన్ భాషను పరిగణించండి, ఇది దాని పొడవైన మిశ్రమ పదాలకు ప్రసిద్ధి చెందింది. "Donaudampfschifffahrtsgesellschaftskapitän" వంటి పదం ఒక ఎలిమెంట్ యొక్క min-content సైజ్‌ను గణనీయంగా పెంచుతుంది. ఆ ఎలిమెంట్ ఒక ఫ్లెక్స్ ఐటెమ్ అయితే, మీరు చిన్న ఆంగ్ల టెక్స్ట్‌తో లేఅవుట్‌ను డిజైన్ చేసినప్పుడు మీరు ఊహించని విధాలుగా అది కుదించడాన్ని నిరోధించవచ్చు. అదేవిధంగా, జపనీస్ లేదా చైనీస్ వంటి కొన్ని భాషలలో పదాల మధ్య ఖాళీలు ఉండకపోవచ్చు, ఇది ర్యాపింగ్ మరియు సైజింగ్ ఎలా లెక్కించబడుతుందో ప్రభావితం చేస్తుంది. ప్రతిఒక్కరికీ, ప్రతిచోటా పనిచేసేంత దృఢంగా లేఅవుట్‌లను నిర్మించడానికి ఇంట్రిన్సిక్ అల్గారిథమ్‌ను అర్థం చేసుకోవడం ఎందుకు కీలకమో ఇది ఒక ఖచ్చితమైన ఉదాహరణ.
పనితీరు గమనికలు
బ్రౌజర్‌కు ఫ్లెక్స్ ఐటెమ్‌ల ఇంట్రిన్సిక్ సైజ్‌లను లెక్కించడానికి వాటి కంటెంట్‌ను కొలవాల్సిన అవసరం ఉన్నందున, ఒక గణన వ్యయం ఉంటుంది. చాలా వెబ్‌సైట్‌లు మరియు అప్లికేషన్‌ల కోసం, ఈ వ్యయం చాలా తక్కువ మరియు దాని గురించి చింతించాల్సిన అవసరం లేదు. అయితే, వేలాది ఎలిమెంట్‌లతో చాలా సంక్లిష్టమైన, లోతుగా నిండిన UIలలో, ఈ లేఅవుట్ గణనలు పనితీరు అడ్డంకిగా మారవచ్చు. అటువంటి అధునాతన సందర్భాల్లో, డెవలపర్లు రెండరింగ్ పనితీరును ఆప్టిమైజ్ చేయడానికి contain: layout లేదా content-visibility వంటి CSS ప్రాపర్టీలను అన్వేషించవచ్చు, కానీ ఇది మరొక రోజు చర్చించాల్సిన విషయం.
చర్యాయోగ్యమైన అంతర్దృష్టులు: మీ ఫ్లెక్స్‌బాక్స్ సైజింగ్ చీట్ షీట్
సంగ్రహంగా, మీరు వెంటనే వర్తింపజేయగల కీలకమైన అంశాలు ఇక్కడ ఉన్నాయి:
- నిజంగా సమాన-వెడల్పు కాలమ్‌ల కోసం: ఎల్లప్పుడూ
flex: 1(ఇదిflex: 1 1 0%కి సంక్షిప్తం) ఉపయోగించండి. సున్నాflex-basisకీలకం. - ఒక ఐటెమ్ కుదించకపోతే: చాలావరకు కారణం దాని పరోక్ష
min-width: auto. ఫ్లెక్స్ ఐటెమ్‌కుmin-width: 0వర్తింపజేయడం ద్వారా దాని కంటెంట్ సైజ్ కంటే తక్కువకు కుదించడానికి అనుమతించండి. - `flex-shrink` వెయిట్ చేయబడిందని గుర్తుంచుకోండి: పెద్ద
flex-basisఉన్న ఐటెమ్‌లు అదేflex-shrinkఫ్యాక్టర్‌తో చిన్న ఐటెమ్‌ల కంటే సంపూర్ణ పరంగా ఎక్కువ కుదిస్తాయి. - `flex-basis` రాజు: ఇది అన్ని సైజింగ్ గణనలకు ప్రారంభ స్థానాన్ని సెట్ చేస్తుంది. తుది లేఅవుట్‌పై అత్యంత ప్రభావం చూపడానికి
flex-basisను నియంత్రించండి.autoఉపయోగించడం కంటెంట్ యొక్క సైజ్‌కు వదిలివేస్తుంది; ఒక నిర్దిష్ట విలువను ఉపయోగించడం మీకు స్పష్టమైన నియంత్రణను ఇస్తుంది. - బ్రౌజర్ లాగా ఆలోచించండి: దశలను దృశ్యమానం చేయండి. మొదట, బేస్ సైజ్‌లను పొందండి. తరువాత, ఖాళీ స్థలాన్ని (పాజిటివ్ లేదా నెగెటివ్) లెక్కించండి. చివరగా, ఆ స్థలాన్ని గ్రో/ష్రింక్ నియమాల ప్రకారం పంపిణీ చేయండి.
ముగింపు
CSS ఫ్లెక్స్‌బాక్స్ సైజింగ్ అల్గారిథమ్ ఏకపక్ష మాయాజాలం కాదు; ఇది బాగా నిర్వచించబడిన, తార్కికమైన మరియు నమ్మశక్యం కాని శక్తివంతమైన కంటెంట్-అవగాహన వ్యవస్థ. సాధారణ ప్రాపర్టీ-విలువ జతలను దాటి అంతర్లీన ప్రక్రియను అర్థం చేసుకోవడం ద్వారా, మీరు విశ్వాసం మరియు ఖచ్చితత్వంతో లేఅవుట్‌లను అంచనా వేయగలరు, డీబగ్ చేయగలరు మరియు ఆర్కిటెక్ట్ చేయగలరు.
తదుపరిసారి ఒక ఫ్లెక్స్ ఐటెమ్ తప్పుగా ప్రవర్తించినప్పుడు, మీరు ఊహించాల్సిన అవసరం లేదు. మీరు మానసికంగా అల్గారిథమ్ ద్వారా అడుగు వేయవచ్చు: `flex-basis`ను తనిఖీ చేయండి, కంటెంట్ యొక్క ఇంట్రిన్సిక్ సైజ్‌ను పరిగణించండి, ఖాళీ స్థలాన్ని విశ్లేషించండి మరియు `flex-grow` లేదా `flex-shrink` నియమాలను వర్తింపజేయండి. మీరు ఇప్పుడు సొగసైనవి మాత్రమే కాకుండా, స్థితిస్థాపకంగా కూడా ఉండే UIలను సృష్టించే జ్ఞానాన్ని కలిగి ఉన్నారు, కంటెంట్ యొక్క డైనమిక్ స్వభావానికి అందంగా అనుగుణంగా, అది ప్రపంచంలో ఎక్కడి నుండి వచ్చినా సరే.