ఫ్లెక్స్‌బాక్స్ యొక్క ప్రాథమికాలను దాటి వెళ్ళండి. align-content, flex-grow, flex-shrink మరియు వాస్తవ ప్రపంచ లేఅవుట్ దృశ్యాలతో అధునాతన అలైన్‌మెంట్ మరియు పంపిణీలో నైపుణ్యం సాధించండి.
CSS ఫ్లెక్స్‌బాక్స్ నైపుణ్యం: అధునాతన అలైన్‌మెంట్ మరియు పంపిణీ
అనేక సంవత్సరాలుగా, ఆధునిక వెబ్ లేఅవుట్‌లో CSS ఫ్లెక్స్‌బాక్స్ ఒక మూలస్తంభంగా ఉంది. చాలా మంది డెవలపర్‌లు display: flex ఉపయోగించి ఐటమ్స్‌ను ఒక వరుసలో అమర్చడానికి లేదా సాధారణ కేంద్రీకృత కాంపోనెంట్‌లను సృష్టించడానికి సౌకర్యంగా ఉంటారు. అయితే, ఫ్లెక్స్‌బాక్స్‌లో నిజమైన నైపుణ్యం అధునాతన అలైన్‌మెంట్ మరియు డైనమిక్ పంపిణీ కోసం దాని సూక్ష్మమైన ప్రాపర్టీలను అర్థం చేసుకోవడంలో ఉంది. మీరు justify-content: center మరియు align-items: center యొక్క ప్రాథమికాలను దాటినప్పుడు, మీరు ఆశ్చర్యకరమైన సులభంగా సంక్లిష్టమైన, రెస్పాన్సివ్ మరియు అంతర్గతంగా ఫ్లెక్సిబుల్ లేఅవుట్‌లను సృష్టించే శక్తిని అన్‌లాక్ చేస్తారు.
ఈ గైడ్ ప్రాథమిక విషయాలు తెలిసిన డెవలపర్‌ల కోసం, కానీ వారి అవగాహనను మరింత లోతుగా పెంచుకోవాలనుకునే వారి కోసం ఉద్దేశించబడింది. మేము బహుళ-లైన్ అలైన్‌మెంట్‌ను నియంత్రించే ప్రాపర్టీలను, ఫ్లెక్స్ ఐటమ్స్ ఎలా పెరుగుతాయో మరియు కుదించబడతాయో అనే దాని వెనుక ఉన్న అధునాతన తర్కాన్ని మరియు సాధారణ లేఅవుట్ సవాళ్లను పరిష్కరించే అనేక శక్తివంతమైన నమూనాలను అన్వేషిస్తాము. సాధారణ వినియోగదారు నుండి ఆత్మవిశ్వాసం గల ఫ్లెక్స్‌బాక్స్ ఆర్కిటెక్ట్‌గా మారడానికి సిద్ధం కండి.
పునాది: ప్రధాన మరియు క్రాస్ యాక్సిస్‌లపై ఒక శీఘ్ర పునశ్చరణ
అధునాతన అంశాలలోకి ప్రవేశించే ముందు, ప్రతి ఫ్లెక్స్ కంటైనర్‌ను నియంత్రించే రెండు యాక్సిస్‌లపై దృఢమైన అవగాహన కలిగి ఉండటం చాలా ముఖ్యం. ఫ్లెక్స్‌బాక్స్‌లోని అన్ని అలైన్‌మెంట్ మరియు పంపిణీ ప్రాపర్టీలు ఈ రెండు యాక్సిస్‌లలో ఒకదాని వెంబడి పనిచేస్తాయి.
- ప్రధాన యాక్సిస్ (Main Axis): ఇది ఫ్లెక్స్ ఐటమ్స్ అమర్చబడిన ప్రాథమిక యాక్సిస్. దీని దిశ
flex-directionప్రాపర్టీ ద్వారా నిర్వచించబడుతుంది. - క్రాస్ యాక్సిస్ (Cross Axis): ఈ యాక్సిస్ ఎల్లప్పుడూ ప్రధాన యాక్సిస్‌కు లంబంగా ఉంటుంది.
ముఖ్యమైన విషయం ఏమిటంటే, ఈ యాక్సిస్‌లు స్థిరంగా ఉండవు. అవి మీ flex-direction విలువ ఆధారంగా తమను తాము తిరిగి అమర్చుకుంటాయి:
flex-direction: row(డిఫాల్ట్): ప్రధాన యాక్సిస్ క్షితిజ సమాంతరంగా (ఎడమ నుండి కుడికి) ఉంటుంది, మరియు క్రాస్ యాక్సిస్ నిలువుగా (పై నుండి కిందకు) ఉంటుంది.flex-direction: column: ప్రధాన యాక్సిస్ నిలువుగా (పై నుండి కిందకు) మారుతుంది, మరియు క్రాస్ యాక్సిస్ క్షితిజ సమాంతరంగా (ఎడమ నుండి కుడికి) మారుతుంది.flex-direction: row-reverse: ప్రధాన యాక్సిస్ క్షితిజ సమాంతరంగా ఉంటుంది కానీ కుడి నుండి ఎడమకు నడుస్తుంది.flex-direction: column-reverse: ప్రధాన యాక్సిస్ నిలువుగా ఉంటుంది కానీ కింద నుండి పైకి నడుస్తుంది.
ఈ ప్రాథమిక భావనను మరచిపోవడమే చాలా ఫ్లెక్స్‌బాక్స్ గందరగోళానికి మూలం. అలైన్‌మెంట్ ప్రాపర్టీని వర్తించే ముందు ఎల్లప్పుడూ మిమ్మల్ని మీరు ప్రశ్నించుకోండి: "నా ప్రధాన యాక్సిస్ ఏ దిశలో ఉంది?"
justify-contentతో ప్రధాన యాక్సిస్ పంపిణీలో నైపుణ్యం
justify-content ప్రాపర్టీ ప్రధాన యాక్సిస్ వెంబడి ఫ్లెక్స్ ఐటమ్స్ మధ్య మరియు చుట్టూ ఖాళీ ఎలా పంపిణీ చేయబడుతుందో నియంత్రిస్తుంది. flex-start, flex-end, మరియు center సూటిగా ఉన్నప్పటికీ, నిజమైన శక్తి స్పేస్-పంపిణీ విలువలలో ఉంది.
స్పేస్ పంపిణీపై ఒక లోతైన పరిశీలన
space-between, space-around, మరియు space-evenly మధ్య ఉన్న సూక్ష్మమైన కానీ ముఖ్యమైన తేడాలను స్పష్టం చేద్దాం.
-
justify-content: space-between;ఈ విలువ ప్రధాన యాక్సిస్‌పై ఐటమ్స్‌ను సమానంగా పంపిణీ చేస్తుంది. మొదటి ఐటమ్ కంటైనర్ యొక్క ప్రారంభానికి నెట్టబడుతుంది, మరియు చివరి ఐటమ్ చివరికి నెట్టబడుతుంది. మిగిలిన ఖాళీ అంతా ఐటమ్స్ మధ్య సమానంగా విభజించబడుతుంది. బయటి అంచులలో ఖాళీ ఉండదు.
వాడుక సందర్భం: మీరు లోగోను ఎడమవైపు మరియు లింక్‌లను కుడివైపు కోరుకునే నావిగేషన్ బార్లకు ఇది సరైనది, లింక్‌ల మధ్య సమానమైన ఖాళీతో.
-
justify-content: space-around;ఈ విలువ ప్రతి ఐటమ్ చుట్టూ సమానమైన ఖాళీతో ఐటమ్స్‌ను పంపిణీ చేస్తుంది. ప్రతి ఐటమ్‌కు దాని ఎడమ మరియు కుడి వైపులా ఒక "బబుల్" ఖాళీ ఉన్నట్లుగా భావించండి. ప్రక్కనే ఉన్న ఐటమ్స్ యొక్క బబుల్స్ కలిసినప్పుడు, వాటి మధ్య ఖాళీ కంటైనర్ అంచుల వద్ద ఉన్న ఖాళీకి రెట్టింపుగా కనిపిస్తుంది. ప్రత్యేకంగా, బయటి అంచుల వద్ద ఉన్న ఖాళీ ఐటమ్స్ మధ్య ఉన్న ఖాళీలో సగం ఉంటుంది.
వాడుక సందర్భం: కార్డ్ లేఅవుట్‌లు లేదా గ్యాలరీలకు ఉపయోగపడుతుంది, ఇక్కడ మీరు ఐటమ్స్ కంటైనర్ అంచుల నుండి కొంత గాలి ఆడే ఖాళీని కోరుకుంటారు, కానీ వాటికి వ్యతిరేకంగా ఉండకూడదు.
-
justify-content: space-evenly;ఈ మూడింటిలో ఇది అత్యంత సహజమైనది. ఇది ఏ రెండు ఐటమ్స్ మధ్యనైనా ఉన్న ఖాళీ, మొదటి/చివరి ఐటమ్ మరియు కంటైనర్ అంచు మధ్య ఉన్న ఖాళీతో సరిగ్గా సమానంగా ఉండేలా చూస్తుంది. ప్రతి గ్యాప్ ఒకే విధంగా ఉంటుంది.
వాడుక సందర్భం: మీకు సంపూర్ణ సమతుల్య, సుష్ట లేఅవుట్ అవసరమైనప్పుడు ఇది అనువైనది. డిజైనర్లు "సమానమైన ఖాళీ" కోసం అడిగినప్పుడు వారు పరోక్షంగా కోరుకునేది ఇదే.
align-items మరియు align-selfతో క్రాస్ యాక్సిస్ అలైన్‌మెంట్‌ను జయించడం
justify-content ప్రధాన యాక్సిస్‌ను నిర్వహిస్తుండగా, align-items ఒకే లైన్‌లో క్రాస్ యాక్సిస్ వెంబడి ఐటమ్స్ యొక్క డిఫాల్ట్ అలైన్‌మెంట్‌ను నిర్వహిస్తుంది.
`align-items` విలువలను అర్థం చేసుకోవడం
align-items: stretch;(డిఫాల్ట్): దీనివల్లే మీ ఫ్లెక్స్ ఐటమ్స్ మీరు అడగకుండానే వాటి కంటైనర్ ఎత్తును నింపుతున్నట్లు కనిపిస్తాయి. ఐటమ్స్ క్రాస్ యాక్సిస్ వెంబడి కంటైనర్ పరిమాణాన్ని నింపడానికి సాగుతాయి (ఉదా., ఒకflex-direction: rowకంటైనర్‌లో ఎత్తు).align-items: flex-start;: ఐటమ్స్ క్రాస్ యాక్సిస్ యొక్క ప్రారంభంలో ప్యాక్ చేయబడతాయి.align-items: flex-end;: ఐటమ్స్ క్రాస్ యాక్సిస్ యొక్క చివరిలో ప్యాక్ చేయబడతాయి.align-items: center;: ఐటమ్స్ క్రాస్ యాక్సిస్ వెంబడి కేంద్రీకరించబడతాయి.align-items: baseline;: ఇది ఒక శక్తివంతమైన మరియు తక్కువగా ఉపయోగించే విలువ. ఐటమ్స్ వాటి టెక్స్ట్ బేస్‌లైన్‌లు వరుసలో ఉండేలా అమర్చబడతాయి. విభిన్న ఫాంట్ సైజ్‌లు ఉన్న ఐటమ్స్ (ఉదా., ఒక ఉపశీర్షిక పక్కన ఒక ప్రధాన శీర్షిక) ఉన్నప్పుడు ఇది చాలా ఉపయోగకరంగా ఉంటుంది మరియు మీరు వాటిని కేవలం వాటి బాక్స్ సరిహద్దుల ద్వారా కాకుండా, టెక్స్ట్‌పరంగా అమర్చాలనుకున్నప్పుడు.
align-selfతో ఓవర్‌రైడ్ చేయడం
ఒకవేళ మీరు ఒక నిర్దిష్ట ఐటమ్ ఇతరుల నుండి భిన్నంగా ప్రవర్తించాలని కోరుకుంటే? అప్పుడే align-self వస్తుంది. ఒక వ్యక్తిగత ఫ్లెక్స్ ఐటమ్‌కు వర్తింపజేస్తే, ఇది ఆ ఐటమ్ కోసం మాత్రమే కంటైనర్ యొక్క align-items ప్రాపర్టీని ఓవర్‌రైడ్ చేస్తుంది. ఇది align-items యొక్క అన్ని విలువలను అంగీకరిస్తుంది (అదనంగా `auto`, ఇది దానిని కంటైనర్ విలువకు రీసెట్ చేస్తుంది).
ఉదాహరణ: align-items: center తో కేంద్రీకరించబడిన కార్డ్‌ల వరుసను ఊహించుకోండి. మీరు ఒక "ఫీచర్డ్" కార్డ్‌కు align-self: stretch; వర్తింపజేయడం ద్వారా దానిని ఇతరుల కంటే పొడవుగా చేసి ప్రత్యేకంగా కనిపించేలా చేయవచ్చు.
గుర్తింపు పొందని హీరో: align-contentతో అధునాతన పంపిణీ
ఇది ఫ్లెక్స్‌బాక్స్‌లో అత్యంత తప్పుగా అర్థం చేసుకోబడిన ప్రాపర్టీ, మరియు దీనిపై పట్టు సాధించడం అధునాతన నైపుణ్యానికి ఒక గుర్తు. align-items తో దాని సారూప్యత ఒక సాధారణ గందరగోళానికి కారణం.
ఇక్కడ కీలకమైన నియమం ఉంది: మీ ఫ్లెక్స్ ఐటమ్స్ అన్నీ ఒకే లైన్‌లో ఉన్నప్పుడు align-contentకి ఎలాంటి ప్రభావం ఉండదు. ఇది బహుళ-లైన్ ఫ్లెక్స్ కంటైనర్ ఉన్నప్పుడు మాత్రమే పనిచేస్తుంది (అంటే, మీరు flex-wrap: wrap; సెట్ చేసి, ఐటమ్స్ వాస్తవానికి కొత్త లైన్లకు చుట్టుకున్నప్పుడు).
దీనిని ఈ విధంగా ఆలోచించండి:
align-itemsఐటమ్స్‌ను వాటి లైన్ లోపల అమరుస్తుంది.align-contentలైన్లను కంటైనర్ లోపల అమరుస్తుంది. ఇది ఐటమ్స్ యొక్క వరుసల మధ్య క్రాస్ యాక్సిస్‌లో ఖాళీ పంపిణీని నియంత్రిస్తుంది.
ఇది ముఖ్యంగా justify-content లాగా పనిచేస్తుంది, కానీ క్రాస్ యాక్సిస్ కోసం. దీని విలువలు దాదాపు ఒకేలా ఉంటాయి:
align-content: flex-start;(డిఫాల్ట్): అన్ని లైన్లు కంటైనర్ ప్రారంభంలో ప్యాక్ చేయబడతాయి.align-content: flex-end;: అన్ని లైన్లు చివరిలో ప్యాక్ చేయబడతాయి.align-content: center;: అన్ని లైన్లు మధ్యలో ప్యాక్ చేయబడతాయి.align-content: space-between;: మొదటి లైన్ ప్రారంభంలో, చివరి లైన్ చివరిలో ఉంటుంది, మరియు ఖాళీ లైన్ల మధ్య సమానంగా పంపిణీ చేయబడుతుంది.align-content: space-around;: ప్రతి లైన్ చుట్టూ సమానమైన ఖాళీ ఉంచబడుతుంది.align-content: space-evenly;: ప్రతి లైన్ మధ్య ఖాళీ ఒకే విధంగా ఉంటుంది.align-content: stretch;: మిగిలిన ఖాళీని తీసుకోవడానికి లైన్లు సాగుతాయి.
వాడుక సందర్భం: ఐటమ్స్ చుట్టుకునే ఒక ఫోటో గ్యాలరీని ఊహించుకోండి. కంటైనర్‌కు స్థిరమైన ఎత్తు ఉంటే, అదనపు నిలువు ఖాళీ మిగిలి ఉండవచ్చు. డిఫాల్ట్‌గా, ఈ ఖాళీ దిగువన కనిపిస్తుంది. align-content: space-between; లేదా align-content: center; ఉపయోగించడం ద్వారా, మీరు మీ మొత్తం ఫోటోల గ్రిడ్ యొక్క నిలువు పంపిణీని నియంత్రించవచ్చు, ఇది చాలా ప్రొఫెషనల్‌గా కనిపించే లేఅవుట్‌ను సృష్టిస్తుంది.
డైనమిక్ సైజింగ్ మరియు పంపిణీ: flex షార్ట్‌హ్యాండ్
స్టాటిక్ లేఅవుట్‌లు అరుదు. ఫ్లెక్స్‌బాక్స్ యొక్క నిజమైన శక్తి డైనమిక్ కంటెంట్ మరియు అందుబాటులో ఉన్న ఖాళీని నిర్వహించగల సామర్థ్యం నుండి వస్తుంది. ఇది మూడు ప్రాపర్టీల ద్వారా నియంత్రించబడుతుంది, తరచుగా flex షార్ట్‌హ్యాండ్ ద్వారా సెట్ చేయబడుతుంది: flex-grow, flex-shrink, మరియు flex-basis.
1. flex-basis: ప్రారంభ స్థానం
ఏదైనా పెరగడం లేదా కుదించడం జరగడానికి ముందు, ఫ్లెక్స్‌బాక్స్‌కు ప్రతి ఐటమ్ కోసం ఒక ప్రారంభ పరిమాణం అవసరం. ఇది flex-basis యొక్క పని. ఇది ప్రధాన యాక్సిస్ వెంబడి ఒక ఎలిమెంట్ యొక్క డిఫాల్ట్ పరిమాణాన్ని నిర్వచిస్తుంది.
- ఒక నిర్దిష్ట పొడవుకు (ఉదా.,
200pxలేదా10rem) సెట్ చేస్తే, అది ఐటమ్ యొక్క ప్రారంభ పరిమాణం అవుతుంది. autoకు సెట్ చేస్తే, అది ఐటమ్‌పై `width` లేదా `height` ప్రాపర్టీ కోసం చూస్తుంది. ఏదీ లేకపోతే, అది ఐటమ్ యొక్క కంటెంట్ ఆధారంగా పరిమాణం ఇస్తుంది.0కు సెట్ చేస్తే, ఐటమ్‌కు ప్రారంభ పరిమాణం ఉండదు మరియు దాని చివరి పరిమాణం పూర్తిగా దానిflex-growనిష్పత్తి ద్వారా నిర్ణయించబడుతుంది.
ఉత్తమ పద్ధతి: ఫ్లెక్స్ సందర్భంలో `width` కు బదులుగా flex-basis ఉపయోగించడం తరచుగా మంచిది, ఎందుకంటే ఇది ప్రధాన యాక్సిస్ సందర్భంలో ఐటమ్ పరిమాణాన్ని నిర్వచించడం గురించి మరింత స్పష్టంగా ఉంటుంది.
2. flex-grow: పాజిటివ్ స్పేస్‌ను వినియోగించడం
ఫ్లెక్స్ కంటైనర్‌లో దాని ప్రధాన యాక్సిస్ వెంబడి అదనపు ఖాళీ ఉన్నప్పుడు, flex-grow ఆ ఖాళీ ఎలా పంపిణీ చేయబడుతుందో నిర్ణయిస్తుంది. ఇది యూనిట్‌లెస్ నిష్పత్తి.
- డిఫాల్ట్ విలువ
0, అంటే ఐటమ్స్ అదనపు ఖాళీని నింపడానికి పెరగవు. - అన్ని ఐటమ్స్‌కు
flex-grow: 1ఉంటే, అదనపు ఖాళీ వాటి మధ్య సమానంగా పంపిణీ చేయబడుతుంది. - ఒక ఐటమ్‌కు
flex-grow: 2మరియు మరొకదానికిflex-grow: 1ఉంటే, మొదటి ఐటమ్ రెండవదాని కంటే రెండు రెట్లు ఎక్కువ అదనపు ఖాళీని పొందుతుంది.
3. flex-shrink: నెగెటివ్ స్పేస్‌ను (ఓవర్‌ఫ్లో) నిర్వహించడం
ఇది `flex-grow` కు ప్రతిరూపం. కంటైనర్‌లో అన్ని ఐటమ్స్‌ను వాటి `flex-basis` లో అమర్చడానికి తగినంత ఖాళీ లేనప్పుడు, అవి కుదించబడాలి. flex-shrink అవి ఎంతగా కుదించబడతాయో నియంత్రిస్తుంది.
- డిఫాల్ట్ విలువ
1, అంటే ఓవర్‌ఫ్లోను నివారించడానికి అన్ని ఐటమ్స్ డిఫాల్ట్‌గా నిష్పత్తిలో కుదించబడతాయి. - మీరు ఒక ఐటమ్‌పై
flex-shrink: 0సెట్ చేస్తే, అది కుదించబడదు. ఇది దానిflex-basisపరిమాణాన్ని నిర్వహిస్తుంది, ఇది కంటైనర్ ఓవర్‌ఫ్లో అవ్వడానికి కారణం కావచ్చు. ఇది లోగోలు లేదా బటన్లు వంటి ఎప్పుడూ కుదించకూడని ఎలిమెంట్‌లకు ఉపయోగపడుతుంది.
flex షార్ట్‌హ్యాండ్: అన్నింటినీ కలిపి ఉంచడం
flex ప్రాపర్టీ అనేది flex-grow, flex-shrink, మరియు flex-basis ల కోసం ఒక షార్ట్‌హ్యాండ్, ఆ క్రమంలో.
flex: 0 1 auto;(డిఫాల్ట్): ఐటమ్ పెరగదు, కుదించబడుతుంది, మరియు దాని బేసిస్ దాని వెడల్పు/ఎత్తు లేదా కంటెంట్ ద్వారా నిర్ణయించబడుతుంది.flex: 1;(flex: 1 1 0;కోసం షార్ట్‌హ్యాండ్): చాలా సాధారణ విలువ. ఐటమ్ పెరగగలదు మరియు కుదించగలదు, మరియు దాని ప్రారంభ పరిమాణం 0. ఇది ఐటమ్స్ వాటి ఫ్లెక్స్-గ్రో నిష్పత్తి ఆధారంగా పూర్తిగా ఖాళీని పంచుకునేలా చేస్తుంది.flex: auto;(flex: 1 1 auto;కోసం షార్ట్‌హ్యాండ్): ఐటమ్ పెరగగలదు మరియు కుదించగలదు, మరియు దాని బేసిస్ దాని కంటెంట్ ద్వారా నిర్ణయించబడుతుంది. ఇది ఐటమ్స్ వాటి కంటెంట్ ఆధారంగా భిన్నంగా పరిమాణంలో ఉండటానికి అనుమతిస్తుంది, కానీ ఇప్పటికీ అదనపు ఖాళీని సౌకర్యవంతంగా గ్రహిస్తుంది.flex: none;(flex: 0 0 auto;కోసం షార్ట్‌హ్యాండ్): ఐటమ్ పూర్తిగా అనమ్యంగా ఉంటుంది. ఇది పెరగదు లేదా కుదించబడదు.
ప్రాక్టికల్ వాడకాలు మరియు అధునాతన దృశ్యాలు
దృశ్యం 1: స్టిక్కీ ఫుటర్ (హోలీ గ్రెయిల్ లేఅవుట్)
ఒక క్లాసిక్ వెబ్ డిజైన్ సమస్య: కంటెంట్ తక్కువగా ఉన్నప్పుడు కూడా ఫుటర్‌ను పేజీ దిగువన ఎలా అంటిపెట్టుకుని ఉంచాలి, కానీ కంటెంట్ పొడవుగా ఉన్నప్పుడు సహజంగా కిందకు నెట్టబడాలి.
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh; /* Viewport Height */
}
.main-content {
flex-grow: 1; /* or flex: 1; */
}
ప్రధాన పేజీ కంటైనర్‌ను కాలమ్-ఆధారిత ఫ్లెక్స్‌బాక్స్‌గా చేసి, ప్రధాన కంటెంట్ ప్రాంతాన్ని flex-grow: 1 కు సెట్ చేయడం ద్వారా, అందుబాటులో ఉన్న మొత్తం నిలువు ఖాళీని వినియోగించుకోవాలని దానికి చెబుతాము, ఇది ఫుటర్‌ను వ్యూపోర్ట్ దిగువకు నెట్టివేస్తుంది.
దృశ్యం 2: సమూహాలను విభజించడానికి ఆటో మార్జిన్లు
మీరు ఎడమవైపు లోగో మరియు కుడివైపు లింక్‌ల సమూహంతో నావిగేషన్ బార్‌ను ఎలా సృష్టిస్తారు? లోగో ఒకే ఫ్లెక్స్ ఐటమ్ అయితే justify-content: space-between పనిచేస్తుంది, కానీ కుడివైపు బహుళ ఐటమ్స్ ఉంటే?
ఫ్లెక్స్‌బాక్స్‌లో ఆటో మార్జిన్‌ల మ్యాజిక్ దీనికి పరిష్కారం.
.navbar {
display: flex;
}
.logo {
/* No special properties needed */
}
.nav-links {
margin-left: auto;
}
ఒక ఫ్లెక్స్ కంటైనర్‌లో, ఒక ఆటో మార్జిన్ అది వర్తింపజేయబడిన దిశలో అందుబాటులో ఉన్న మొత్తం ఖాళీని అత్యాశగా తీసుకుంటుంది. నావిగేషన్ లింక్‌ల సమూహంపై margin-left: auto సెట్ చేయడం ద్వారా, ఇది లోగో మరియు లింక్‌ల మధ్య ఒక సౌకర్యవంతమైన, ఖాళీ స్థలాన్ని సృష్టిస్తుంది, లింక్‌లను పూర్తిగా కుడివైపుకు నెట్టివేస్తుంది.
దృశ్యం 3: మీడియా ఆబ్జెక్ట్
ఒక సాధారణ UI నమూనాలో ఒక వైపు ఇమేజ్ లేదా ఐకాన్ మరియు మరోవైపు వివరణాత్మక టెక్స్ట్ ఉంటుంది. టెక్స్ట్ మిగిలిన ఖాళీని మొత్తం తీసుకుని, అందంగా చుట్టుకోవాలి.
.media-object {
display: flex;
align-items: flex-start; /* Aligns image and text to the top */
}
.media-image {
margin-right: 1rem;
flex-shrink: 0; /* Prevents the image from being squished */
}
.media-body {
flex-grow: 1; /* Takes up all remaining horizontal space */
}
ఇక్కడ, టెక్స్ట్ కంటైనర్‌పై flex-grow: 1 కీలకం. ఇది ఇమేజ్ ఎంత వెడల్పుగా ఉన్నా, టెక్స్ట్ బాడీ కంటైనర్‌లో మిగిలిన అందుబాటులో ఉన్న వెడల్పును నింపడానికి విస్తరిస్తుందని నిర్ధారిస్తుంది.
ముగింపు: అలైన్‌మెంట్ దాటి, ఉద్దేశపూర్వక లేఅవుట్ వైపు
ఫ్లెక్స్‌బాక్స్‌లో నైపుణ్యం సాధించడం అంటే కేవలం వస్తువులను కేంద్రీకరించడం దాటి వెళ్లడం. ఇది యాక్సిస్‌ల మధ్య పరస్పర చర్య, ఖాళీ పంపిణీ యొక్క తర్కం, మరియు ఐటమ్ సైజింగ్ యొక్క సౌలభ్యాన్ని అర్థం చేసుకోవడం. బహుళ-లైన్ లేఅవుట్‌ల కోసం align-content, డైనమిక్ సైజింగ్ కోసం flex షార్ట్‌హ్యాండ్, మరియు ఆటో మార్జిన్‌ల వంటి శక్తివంతమైన నమూనాలపై దృఢమైన పట్టు సాధించడం ద్వారా, మీరు దృశ్యమానంగా ఆకర్షణీయంగా ఉండటమే కాకుండా, దృఢమైన, రెస్పాన్సివ్, మరియు అర్థవంతంగా శుభ్రంగా ఉండే లేఅవుట్‌లను నిర్మించవచ్చు.
తదుపరిసారి మీరు ఒక సంక్లిష్టమైన లేఅవుట్ సవాలును ఎదుర్కొన్నప్పుడు, ఫ్లోట్‌లు లేదా సంక్లిష్టమైన పొజిషనింగ్ హ్యాక్‌ల కోసం వెళ్లే ప్రలోభాన్ని నిరోధించండి. బదులుగా, మిమ్మల్ని మీరు ప్రశ్నించుకోండి: దీనిని ఉద్దేశపూర్వక ఖాళీ పంపిణీతో పరిష్కరించవచ్చా? సమాధానం, చాలా తరచుగా, CSS ఫ్లెక్స్‌బాక్స్ యొక్క అధునాతన సామర్థ్యాలలో కనుగొనబడుతుంది.