వెబ్ డిజైనర్ ఫ్లెక్స్‌బాక్స్‌కు మార్గదర్శి

విషయము

• తదుపరి తరం డిజైన్
• ఫ్లెక్స్ అంశాలు
• వరుసలు మరియు నిలువు వరుసలు
• సెంటర్ అంశాలు
• క్రాస్ అక్షం
• ప్రధాన అక్షం వెంట సమర్థించుకోండి
• బహుళ పంక్తులను సమలేఖనం చేయండి
• స్థలాన్ని పూరించండి
• పెరుగుతున్న మరియు కుంచించుకుపోతోంది
• తెలియని నావిగేషన్ పరిమాణం
• సమాన-ఎత్తు నిలువు వరుసలు
• ఫ్లెక్స్‌బాక్స్ ప్రయోజనాలు
• వనరులు ఉండాలి

మీరు ఇంకా మీ ప్రాజెక్ట్‌లలో ఫ్లెక్సిబుల్ బాక్స్ లేఅవుట్ మాడ్యూల్ ఉపయోగించడం ప్రారంభించారా? మాడ్యూల్ కొంతకాలంగా ఉన్నప్పటికీ, ఫ్రంట్ ఎండ్ డెవలపర్‌లను వెబ్ డిజైన్ సాధనంగా ఉపయోగించకుండా ఆపే రెండు ప్రధాన అవరోధాలు ఉన్నాయి.

మొదట, ఇటీవల వరకు స్పెక్ ఫ్లక్స్‌లో ఉంది మరియు దీనికి గొప్ప మద్దతు లేదు. నేడు, అన్ని ఆధునిక బ్రౌజర్‌లు ఫ్లెక్స్‌బాక్స్‌కు మద్దతు ఇస్తున్నాయి. రెండవ అవరోధం ఏమిటంటే, ఫ్లెక్స్‌బాక్స్ భావనను గ్రహించడం చాలా కఠినమైనది. ఇది సూపర్-శక్తివంతమైనది అయితే, కదిలే భాగాలు చాలా ఉన్నాయి మరియు నేర్చుకోవడం కష్టమవుతుంది. కానీ పేజీ మూలకాలను అమర్చగల సామర్థ్యం మరియు బహుళ స్క్రీన్ పరిమాణాలలో ict హించదగిన రీతిలో ప్రవర్తించే సామర్థ్యం చాలా విలువైనవి.

ఈ వ్యాసంలో, ఫ్లెక్స్‌బాక్స్ వెనుక ఉన్న ప్రాథమిక అంశాలతో నేను మిమ్మల్ని లేచి నడుపుతాను. ఈ ప్రధాన భావనలను అర్థం చేసుకోవడం చాలా సరళమైన, లేఅవుట్‌లను సృష్టించడం సులభం (ముఖ్యంగా ప్రతిస్పందించే వెబ్ డిజైన్ కోసం) ప్రపంచాన్ని తెరుస్తుంది.

తదుపరి తరం డిజైన్

ఫ్లెక్స్‌బాక్స్ అనేది CSS తో లేఅవుట్‌లను సృష్టించడంలో మీకు సహాయపడే తదుపరి తరం సాధనం; మీరు మీ వెబ్‌సైట్‌లోని ఒక విభాగాన్ని వేయాలనుకుంటున్నారా లేదా మీడియా అంశాల గ్రిడ్‌ను ప్రదర్శించాలనుకుంటున్నారా. దుష్ట CSS హక్స్ లేదా పెళుసైన జావాస్క్రిప్ట్ డిపెండెన్సీలను ఆశ్రయించకుండా, మీ పేజీలోని అంశాలను సులభంగా సమలేఖనం చేయడానికి, కేంద్రీకరించడానికి, సమర్థించడానికి, స్కేల్ చేయడానికి మరియు క్రమాన్ని మార్చడానికి ఇది మిమ్మల్ని అనుమతిస్తుంది.

ఫ్లెక్స్‌బాక్స్ ఫ్లోట్లు, పొజిషనింగ్ ట్రిక్స్, ఇన్లైన్-బ్లాక్ లేఅవుట్‌లను మరియు - వణుకు - టేబుల్ డిస్ప్లే లేఅవుట్‌లను భర్తీ చేయగలదు. CSS లో కొన్ని సరళమైన లేఅవుట్లు ఎందుకు కష్టంగా లేదా అసాధ్యంగా ఉన్నాయో అని మీరు ఎప్పుడైనా ఆలోచిస్తూ ఉంటే, మీరు ఫ్లెక్స్‌బాక్స్‌ను ఇష్టపడతారు.

ఫ్లెక్స్ అంశాలు

ఫ్లెక్స్‌బాక్స్ యొక్క మాయాజాలం తల్లిదండ్రుల ‘ఫ్లెక్స్ కంటైనర్’ మరియు పిల్లల ‘ఫ్లెక్స్ ఐటమ్స్’ మధ్య సంబంధంలో ఉంది. ఫ్లెక్స్‌బాక్స్‌పై పూర్తి నియంత్రణను పొందడానికి, మీరు ఫ్లోట్‌లు, పొజిషనింగ్ మరియు క్లియరింగ్ యొక్క మునుపటి ఆలోచనలను పక్కన పెట్టాలి. ఇది మీ పేజీని వేయడానికి పూర్తిగా క్రొత్త మార్గం.

అమరిక ప్రదర్శన: వంచు; పేరెంట్ ఎలిమెంట్‌లో దీన్ని ఫ్లెక్స్ కంటైనర్‌గా మారుస్తుంది మరియు దాని తక్షణ పిల్లలందరూ ఫ్లెక్స్ ఐటెమ్‌లుగా మార్చబడతారు. మీరు మీ మార్కప్‌ను సెటప్ చేసిన తర్వాత, లేఅవుట్‌ను సృష్టించడానికి అందుబాటులో ఉన్న అనేక ఫ్లెక్స్ లక్షణాలలో ఒకదాన్ని ఉపయోగించవచ్చు.

గమనిక: ఏదైనా HTML మూలకాలు ఫ్లెక్స్ కంటైనర్ లేదా ఫ్లెక్స్ ఐటెమ్ కావచ్చు. ఏదైనా : ముందు మరియు : తరువాత మీ ఫ్లెక్స్ కంటైనర్‌లో మీరు కలిగి ఉన్న నకిలీ అంశాలు పిల్లలుగా పరిగణించబడతాయి మరియు అందువల్ల ఫస్ట్-క్లాస్ ఫ్లెక్స్ అంశాలు.

వరుసలు మరియు నిలువు వరుసలు

ఫ్లెక్స్‌బాక్స్‌లో రెండు అక్షాలు ఉన్నాయి, ఇవి పేజీలోని ఫ్లెక్స్ అంశాలను ఎలా ఉంచాలో నియంత్రిస్తాయి: ప్రధాన అక్షం మరియు క్రాస్ అక్షం. అప్రమేయంగా, ఫ్లెక్స్‌బాక్స్ ఏర్పాటు చేయబడింది కాబట్టి ప్రధాన అక్షం ఎడమ నుండి కుడికి వెళుతుంది (లేదా దీనికి విరుద్ధంగా, కుడి నుండి ఎడమకు చదివే భాషలకు) మరియు క్రాస్ అక్షం పై నుండి క్రిందికి ప్రవహిస్తుంది (పైన చూపబడింది). మీరు దానిని గుర్తుపెట్టుకునే ముందు, ఇది చేయగలదని మరియు సంకల్పం గమనించండి వంచు-దిశ ఆస్తి.

అప్రమేయంగా, ఫ్లెక్స్‌బాక్స్ దీనితో సెటప్ చేయబడింది flex-direction: అడ్డు వరుస; అంటే అంశాలు ప్రధాన అక్షం మీద ఎడమ నుండి కుడికి వరుసగా ప్రవహిస్తాయి. మేము ప్రధాన అక్షాన్ని మార్చవచ్చు, కనుక ఇది ఉపయోగించడం ద్వారా కుడి నుండి ఎడమకు ప్రవహిస్తుంది flex-direction: అడ్డు వరుస-రివర్స్ (పైన చూపిన విధంగా).

ప్రధాన అక్షం మరియు క్రాస్ అక్షం రెండింటినీ మార్చడానికి, మేము లేఅవుట్ను మారుస్తాము flex-direction: కాలమ్;. ఇది ఒక కాలమ్‌లో (పైన) ప్రధాన అక్షం మరియు ఫ్లెక్స్ ఐటెమ్ ప్రవాహాన్ని ఎడమ నుండి కుడికి పై నుండి క్రిందికి మారుస్తుంది. మేము కూడా దిగువ నుండి ప్రారంభించి, ప్రధాన అక్షాన్ని తిప్పడం ద్వారా పైకి కదలవచ్చు flex-direction: కాలమ్-రివర్స్.

సెంటర్ అంశాలు

ఫ్లెక్స్‌బాక్స్ గురించి ఒక మంచి విషయం ఏమిటంటే, మీ కంటెంట్‌ను మీకు నచ్చిన విధంగా సమలేఖనం చేయడానికి ఇది మిమ్మల్ని అనుమతిస్తుంది - నిలువు కేంద్రీకృతం కూడా ఒక సంపూర్ణ గాలి! ఫ్లెక్స్‌బాక్స్ అమరిక చుట్టూ తరచుగా గందరగోళం ఉంది, ఎందుకంటే మా ఫ్లెక్స్ ఐటెమ్‌ల అమరికను సవరించడానికి మేము ఉపయోగించే మూడు వేర్వేరు లక్షణాలు ఉన్నాయి.

దీనికి ఒక కారణం ఏమిటంటే, ఈ లక్షణాలు ప్రధాన మరియు క్రాస్ అక్షంతో పాటు వస్తువులను సమలేఖనం చేస్తాయి. కాబట్టి, ‘నేను దేనిని నిలువుగా లేదా అడ్డంగా ఎలా కేంద్రీకరించగలను?’ అని అడగడానికి బదులుగా, మీరు మొదట మీ గొడ్డలిని ఏ దిశలో చూపించారో మీరు స్థాపించాలి, ఆపై మీ వంగిన వస్తువులను సరిగ్గా అమర్చడానికి మరియు మధ్యలో ఉంచడానికి ఏ CSS ఆస్తిని ఉపయోగించాలో గుర్తించండి.

తరువాతి కొన్ని ఉదాహరణలలో, నేను నా అంశాలను ఖచ్చితంగా కేంద్రీకరించడానికి ప్రయత్నిస్తాను. అయితే, ఈ లక్షణాలలో ప్రతిదానికి అనేక అమరిక ఎంపికలు ఉన్నాయని మీరు తెలుసుకోవాలి. పూర్తి జాబితా కోసం, ఈ CSS- ట్రిక్స్ ఫ్లెక్స్‌బాక్స్ సూచనను సులభంగా ఉంచాలని నేను సిఫార్సు చేస్తున్నాను.

క్రాస్ అక్షం

అప్రమేయంగా, ఫ్లెక్స్ అంశాలు క్రాస్ యాక్సిస్ వెంట మొత్తం ఫ్లెక్స్ కంటైనర్ అంతటా విస్తరించి ఉంటాయి. మేము క్రాస్ అక్షం వెంట వస్తువులను మధ్యలో ఉంచాలనుకుంటే, మేము దానిని ఉపయోగించవచ్చు సమలేఖనం-అంశాలు మా ఫ్లెక్స్ కంటైనర్‌లోని ఆస్తి మరియు దానిని సెట్ చేయండి కేంద్రం (పైన చూపబడింది).

అదనంగా సాగదీయండి మరియు కేంద్రం, మేము కూడా ఉపయోగించవచ్చు ఫ్లెక్స్-స్టార్ట్ మరియు ఫ్లెక్స్-ఎండ్ వస్తువులను ఎగువ మరియు దిగువ వరుసగా ఎంకరేజ్ చేయడానికి. చివరగా, మాకు బేస్లైన్ ఉంది, ఇది మీ టెక్స్ట్ యొక్క దిగువ (లేదా బేస్లైన్) వెంట వస్తువులను సమలేఖనం చేస్తుంది. మీరు విభిన్న ఫాంట్ పరిమాణాలతో అంశాలను సమలేఖనం చేయడానికి ప్రయత్నిస్తున్నప్పుడు ఇది చాలా సహాయపడుతుంది.

ప్రధాన అక్షం వెంట సమర్థించుకోండి

ఇప్పుడు మనము క్రాస్ యాక్సిస్ వెంట పని చేస్తున్నాము - మన విషయంలో పై నుండి క్రిందికి - ప్రధాన అక్షం అంతటా కేంద్రీకృత పనిని పొందాలి. దీని కోసం, మేము ఉపయోగిస్తాము సమర్థించు-కంటెంట్: కేంద్రం (పైన చూపబడింది).

తోనే సమలేఖనం-అంశాలు, మేము కూడా ఉపయోగించవచ్చు ఫ్లెక్స్-స్టార్ట్ లేదా ఫ్లెక్స్-ఎండ్, అలాగే స్థలం మధ్య మరియు స్థలం చుట్టూ, ఇది మూలకాల మధ్య మిగిలిన స్థలాన్ని సమానంగా విభజిస్తుంది. మార్జిన్ మరియు వెడల్పులలో 100 శాతం వరకు జోడించని గ్రిడ్ లేఅవుట్‌లతో పనిచేసేటప్పుడు ఇది చాలా ఉపయోగకరంగా ఉంటుంది.

గుర్తుంచుకోండి, మేము డిఫాల్ట్ నుండి మారితే flex-direction: అడ్డు వరుస; కు flex-direction: కాలమ్;, ప్రధాన అక్షం ఎడమ నుండి కుడికి పై నుండి క్రిందికి మారుతుంది. మేము కాలమ్‌కు మారినప్పుడు, సమలేఖనం-అంశాలు క్షితిజ సమాంతర అమరికగా మారుతుంది, అయితే సమర్థించు-కంటెంట్ నిలువు అమరిక అవుతుంది.

బహుళ పంక్తులను సమలేఖనం చేయండి

ఉండగా సమలేఖనం-అంశాలు మరియు సమర్థించు-కంటెంట్ మీకు ఒకే వరుస లేదా కంటెంట్ కాలమ్ ఉన్నప్పుడు గొప్పగా పని చేయండి, మీరు ఉపయోగించడం ఫలితంగా బహుళ పంక్తుల విషయాలతో వ్యవహరించేటప్పుడు విషయాలు కొంచెం ఉపాయంగా ఉంటాయి. flex-wrap: చుట్టు; ఫ్లెక్స్ కంటైనర్ మీద.

సమలేఖనం-కంటెంట్ లాగే పనిచేస్తుంది సమర్థించు-కంటెంట్, కానీ మనకు బహుళ పంక్తులు ఉన్నప్పుడు ప్రారంభమవుతుంది. దరఖాస్తు చేయడం ద్వారా సమలేఖనం-కంటెంట్: కేంద్రం; పంక్తులు క్రాస్ యాక్సిస్ మధ్యలో ఎంకరేజ్ చేస్తాయని మరియు వాటి మూలకాలను అక్కడి నుండి కేంద్రీకరిస్తాయని మేము నిర్ధారించగలము.

తోనే సమర్థించు-కంటెంట్, మేము కూడా ఉపయోగించవచ్చు ఫ్లెక్స్-స్టార్ట్, ఫ్లెక్స్-ఎండ్, స్థలం మధ్య మరియు స్థలం చుట్టూ. ఏదేమైనా, ఈసారి వారు కంటెంట్ యొక్క అడ్డు వరుసలు లేదా నిలువు వరుసల మధ్య ఉన్న స్థలాన్ని సూచిస్తారు, మరియు ఫ్లెక్స్ ఐటెమ్‌లను కాదు.

ఇప్పుడు, కేవలం నాలుగు పంక్తుల CSS తో, ఫ్లెక్స్ కంటైనర్ యొక్క ప్రత్యక్ష పిల్లలందరినీ నిలువుగా మరియు అడ్డంగా కేంద్రీకరించే బుల్లెట్ ప్రూఫ్ మార్గం మనకు ఉంది.

.కంటైనర్ {సమలేఖనం-అంశాలు: కేంద్రం; సమర్థించు-కంటెంట్: కేంద్రం; సమలేఖనం-కంటెంట్: కేంద్రం; flex-wrap: చుట్టు; }

స్థలాన్ని పూరించండి

ఇప్పటివరకు, అమరిక గురించి మేము నేర్చుకున్న ప్రతిదీ ఫ్లెక్స్ కంటైనర్‌తో మరియు దాని పిల్లలను ఎలా సమలేఖనం చేస్తుంది. అలైన్-సెల్ఫ్ తో ఓవర్రైడ్ చేయడం సాధ్యపడుతుంది సమలేఖనం-అంశాలు వ్యక్తిగతంగా సెట్ చేయడం ద్వారా ఫ్లెక్స్ కంటైనర్‌లో ఆస్తి సెట్ చేయబడింది align-self కు ఫ్లెక్స్-స్టార్ట్, ఫ్లెక్స్-ఎండ్, కేంద్రం, బేస్లైన్ లేదా సాగదీయండి.

ఫ్లెక్స్‌బాక్స్‌లో తరచుగా తప్పుగా అర్ధం చేసుకోబడిన మరొక భాగం ఏమిటంటే, పెరుగుదల, కుదించడం మరియు ఆధార విలువలతో ఎలా పని చేయాలి. పిక్సెల్-పర్ఫెక్ట్ గ్రిడ్ల యొక్క ఏదైనా ఆలోచనలను మరోసారి విసిరివేయడం మరియు ఫ్లెక్స్‌బాక్స్ అనువైనది అని స్వీకరించడం సహాయపడుతుంది.

ప్రతి ఫ్లెక్స్ ఐటెమ్‌ను కేటాయించవచ్చు వంచు-పెరుగుతాయి, వంచు-కుదించండి మరియు ఒక వంచు-ఆధారం విలువ. ఈ విలువలతో మనం మా ఆదర్శ పరిమాణాలను సూచించగలము, ఆపై అదనపు లేదా తగినంత స్థలం లేని పరిస్థితుల్లో అంశాలు ఎలా పని చేయాలో పేర్కొనండి. అక్కడ నుండి, అంశాలు తమకు తాముగా గుర్తించబడతాయి.

నేను ఈ లక్షణాలను ఇలా ఆలోచించాలనుకుంటున్నాను:

• వంచు-పెరుగుతాయి: అదనపు స్థలం అందుబాటులో ఉన్నప్పుడు నేను ఎలా పని చేయాలి? ఫ్లెక్స్ అంశాలు మిగిలిన స్థలాన్ని ఎలా విభజిస్తాయి?
• వంచు-కుదించండి: అన్ని ఫ్లెక్స్ వస్తువులకు తగినంత స్థలం లేనప్పుడు నేను ఎలా పని చేయాలి? కంటైనర్‌ను పొంగిపొర్లుతున్న బదులు, ప్రతిదీ సరిపోయేలా చేయడానికి తమలో కొంత భాగాన్ని ఎవరు వదులుకుంటారు?
• వంచు-ఆధారం: మీ మూలకంపై ఖచ్చితమైన వెడల్పు లేదా ఎత్తును సెట్ చేయడానికి బదులుగా, ఆదర్శంగా ఏ వెడల్పు (వరుసగా) లేదా ఎత్తు (నిలువు వరుసగా) ఉంటుంది?

ఈ లక్షణాలను ఒక్కొక్కటిగా పేర్కొనడం సాధ్యమే అయినప్పటికీ, మీరు ఎప్పుడైనా పేర్కొనడానికి ఫ్లెక్స్ సంక్షిప్తలిపిని ఉపయోగిస్తున్నారు పెరుగు, కుదించండి మరియు ఆధారంగా విలువలు ఒకేసారి. ఫ్లెక్స్ సంక్షిప్తలిపి ఆస్తి యొక్క మరింత వివరణాత్మక వివరణ కోసం Flexbox.io వద్ద వీడియోలను తనిఖీ చేయండి.

పెరుగుతున్న మరియు కుంచించుకుపోతోంది

ఆలోచన ఏమిటంటే, మన ఆదర్శ వెడల్పు లేదా ఎత్తును ప్రాధమిక విలువతో సెట్ చేయవచ్చు, ఆపై ఫ్లెక్స్ వస్తువులకు అదనపు స్థలం అందుబాటులో ఉన్నప్పుడు, వంచు-పెరుగుతాయి ఎంత అదనపు తీసుకోవాలో ఆస్తి నిర్ణయిస్తుంది. అదేవిధంగా, తగినంత స్థలం అందుబాటులో లేనప్పుడు, ప్రతి మూలకం ఎంత వదులుకోవాలో (లేదా ‘కుదించండి’) కుదించే ఆస్తి నిర్ణయిస్తుంది.

ది వంచు-పెరుగుతాయి మరియు వంచు-కుదించండి లక్షణాలు యూనిట్-తక్కువ, దామాషా విలువలు. వారు ఎంత వివరిస్తారు - అన్ని ఇతర ఫ్లెక్స్ వస్తువులకు సంబంధించి - అంశం పెరుగుతుంది లేదా తగ్గిపోతుంది.

మాకు రెండు ఫ్లెక్స్ అంశాలు ఉన్నాయని చెప్పండి: వీడియో మరియు క్రెడిట్స్. మేము వీడియోను సెట్ చేస్తాము flex: 1 1 700px; మరియు క్రెడిట్స్ flex: 3 3 300px;. ఇప్పుడు ఈ రెండు వస్తువుల పేరెంట్ ఫ్లెక్స్ కంటైనర్, మరియు ఇది 1000 పిక్స్ వెడల్పు ఉన్నప్పుడు సంపూర్ణంగా పనిచేస్తుంది: వీడియో దాని 700 పిక్స్ ను తీసుకుంటుంది మరియు క్రెడిట్స్ మిగతా 300 పిక్స్ ను తీసుకుంటాయి.

ఫ్లెక్స్ కంటైనర్ 1500px వెడల్పు ఉన్నప్పుడు ఏమి జరుగుతుంది? మాకు పని చేయడానికి 500px అదనపు ఉంది, కాబట్టి అది ఎక్కడికి వెళ్తుంది? అక్కడే వంచు-పెరుగుతాయి కిక్స్ ఇన్. వీడియో 1 కి సెట్ చేయబడి, క్రెడిట్స్ 3 కి సెట్ చేయబడితే, అన్ని అదనపు గది అంటే, క్రెడిట్స్ వీడియోకు లభించే స్థలం (125 పిక్స్) మూడు రెట్లు (375 పిక్స్) పడుతుంది.

సారూప్యత, మా ఫ్లెక్స్ కంటైనర్ 1000px కన్నా తక్కువగా ఉన్నప్పుడు ఏమి జరుగుతుంది? ఇది 900 పిక్స్ అని చెప్పండి: అప్పుడు వీడియో మరియు క్రెడిట్స్ ఎలా పనిచేస్తాయి? ఫ్లోట్‌ల మాదిరిగా కాకుండా, మేము క్రొత్త పంక్తిలోకి ప్రవేశించము, లేదా వాటిని శాతంతో తగ్గించలేము. బదులుగా, మేము ఉపయోగిస్తాము వంచు-కుదించండి ఆస్తి.

క్రెడిట్స్ a కలిగి ఉన్నందున వంచు-కుదించండి యొక్క 3 మరియు వీడియో a వంచు-కుదించండి 1 లో, దీని అర్థం క్రెడిట్‌లు వీడియో కంటే మూడు రెట్లు ఎక్కువ స్థలాన్ని ఇస్తాయి. కాబట్టి మనం ఎక్కడి నుంచో 100 పిక్స్‌ని గొరుగుట అవసరం కాబట్టి, క్రెడిట్‌లు 75 పిక్స్‌ని వదులుకుంటాయి, వీడియో కంటైనర్ 25 పిక్స్‌ని మాత్రమే ఇస్తుంది.

తెలియని నావిగేషన్ పరిమాణం

ఫ్లెక్స్‌బాక్స్ యొక్క కొన్ని సాధారణ ఉపయోగ సందర్భాలను చూద్దాం. మీరు ఎప్పుడైనా WordPress వంటి CMS లో నావిగేషన్‌తో పనిచేసినట్లయితే, మీ నావిగేషన్‌లో ఎన్ని అంశాలు చేర్చబడతాయో to హించడం కష్టమని మీకు తెలుసు.

అన్ని మూలకాల మధ్య ఖాళీని సమానంగా పంపిణీ చేయడానికి జావాస్క్రిప్ట్ అవసరం. ఉదాహరణకు మీకు మూడు అంశాలు ఉంటే, ప్రతి ఒక్కటి వెడల్పులో 33.33 శాతం, ఐదు అంశాలతో ఒక్కొక్కటి 20 శాతం తీసుకోవాలి.

సాధారణంగా కనిపించే ఈ కోడ్‌ను ఉదాహరణగా చూద్దాం:

ul> li> a href = "#"> హోమ్ </ a> </ li> a href = "#"> గురించి </ a> / li> li> a href = "#"> సంప్రదించండి </ a> / li> / ul>

ఫ్లెక్స్‌బాక్స్‌తో, మేము ఈ నావిగేషన్‌ను సులభంగా సృష్టించగలము మరియు ప్రతిస్పందించేలా చేయగలము, అన్నీ కేవలం CSS యొక్క కొన్ని పంక్తులతో. మన నావిగేషన్ కంటైనర్‌ను (సాధారణంగా క్రమం లేని వస్తువుల జాబితా) సెట్ చేయడమే మనం చేయాల్సిందల్లా ప్రదర్శన: వంచు, ఆపై ప్రతి ఫ్లెక్స్ అంశాలు వంచు: 1 లేదా flex-grow: 1;.

ఇది జాబితా అంశాలను అడ్డంగా విస్తరించి, అందుబాటులో ఉన్న వెడల్పుకు సరిగ్గా సరిపోతుంది. ఇది చాలా చక్కగా పనిచేయడానికి కారణం, మేము 1 పెరగడానికి ఫ్లెక్స్ ఐటెమ్‌లను సెట్ చేసాము, అంటే అదనపు స్థలం మిగిలి ఉన్నప్పుడు, అది అన్ని వస్తువుల మధ్య సమానంగా విభజించబడుతుంది.

దీని గురించి మరింత తెలుసుకోవడానికి మరియు మీ నావిగేషన్ ఎలిమెంట్లను భిన్నంగా ఎలా పరిమాణంలో ఉంచుకోవాలో తెలుసుకోవడానికి, Flexbox.io లో అందుబాటులో ఉన్న ప్రతిస్పందించే నావిగేషన్ ట్యుటోరియల్‌ను చూసుకోండి.

సమాన-ఎత్తు నిలువు వరుసలు

CSS కి ఎత్తు ఉందని మీరు ఎప్పుడైనా కోరుకున్నారా: అత్యధిక-తోబుట్టువుల ఆస్తి. మనమంతా అక్కడే ఉన్నాము - మాకు మూడు నిలువు వరుసలు ఉన్నాయి, ఇవన్నీ వేర్వేరు పరిమాణాలు (పైన). కంటెంట్ డైనమిక్ మరియు సైట్ ప్రతిస్పందిస్తుంది, కాబట్టి ప్రతి దానిపై స్థిర ఎత్తును సెట్ చేయడం ప్రశ్నార్థకం కాదు మరియు జావాస్క్రిప్ట్ పరిష్కారానికి అనువైనది కాదు.

సమలేఖనం-అంశాల డిఫాల్ట్ సాగతీత అని ఇంతకుముందు తెలుసుకున్నాము. పేరెంట్ ఫ్లెక్స్ కంటైనర్‌కు సరిపోయే విధంగా ఫ్లెక్స్ అంశాలు సాగవుతాయని దీని అర్థం. మరియు ఫ్లెక్స్ కంటైనర్ యొక్క ఎత్తు ఎలా నిర్వచించబడింది? దాదాపు ఎల్లప్పుడూ ఎత్తైన కంటెంట్ బాక్స్ యొక్క ఎత్తు ద్వారా.

ఉదాహరణకు, ఈ క్రింది మార్కప్ తీసుకుందాం. మేము దీనిని ఫ్లోట్లు మరియు శాతం వెడల్పులతో అందించినట్లయితే, కంటైనర్ మధ్య మూలకం ద్వారా పరిమాణంగా ఉందని మరియు మిగిలిన రెండు అవి అవసరమయ్యేంత ఎక్కువగా ఉన్నాయని మేము చూస్తాము.

div> div> p> నేను చిన్నవాడిని </ p> / div> div> p> నేను చాలా పొడవైన పెట్టె, అది అతి పెద్దది </ p> / div> div> p> నేను మీడియం సైజ్ బాక్స్ / p > / div> / div>

ఇప్పుడు, మేము కేవలం ఉపయోగిస్తే ప్రదర్శన: వంచు; ఫ్లెక్స్ కంటైనర్లో, మరియు ప్రతి మూలకాన్ని 33.33 శాతంగా సెట్ చేయండి వంచు-ఆధారం ఆస్తి, వెంటనే ఫ్లెక్స్ అంశాలు మొత్తం క్రాస్ అక్షం అంతటా విస్తరించి ఉంటాయి, వాటిలో ఎంత కంటెంట్ ఉన్నప్పటికీ (పై చిత్రాన్ని చూడండి).

.కంటైనర్ {ప్రదర్శన: వంచు; } .బాక్స్ {వంచు: 1 1 33.33%; }

ఫ్లెక్స్‌బాక్స్ ప్రయోజనాలు

ఫ్లెక్సిబుల్ బాక్స్ మాడ్యూల్‌ను ఎలా ఉపయోగించాలో నేర్చుకోవడంలో మీరు ఇప్పుడు విలువను చూస్తారని నేను ఆశిస్తున్నాను. CSS తో మీకు ఉన్న ప్రతి సమస్యను ఇది పరిష్కరించదు, ఇది ప్రతి డిజైనర్ మరియు డెవలపర్ తెలుసుకోవలసిన ముఖ్యమైన సాధనం మరియు వారి ఆయుధశాలలో ఉండాలి.

CSS కి ఇంత పెద్ద మొత్తాన్ని కలిగి ఉన్నప్పటి నుండి కొంతకాలంగా ఉంది, మరియు ఇది CSS యొక్క కఠినమైన భాగాలలో ఒకటి అని నేను వాదించాను. ఫ్లోట్లు నేర్చుకున్నప్పటికీ మీరు నెట్టివేసినట్లు గుర్తుంచుకోండి, కాబట్టి ఫ్లెక్స్‌బాక్స్ పూర్తిగా మీరు నేర్చుకోగల విషయం!

వనరులు ఉండాలి

ఏమిటి ఫ్లెక్స్‌బాక్స్ ?!

‘వాట్ ది ఫ్లెక్స్‌బాక్స్ ?!’ నేను సృష్టించిన ఉచిత 20-వీడియో శిక్షణా కోర్సు. కోర్సు యొక్క మొదటి భాగంలో, ప్రతి వీడియో ఫ్లెక్స్‌బాక్స్ యొక్క కొత్త కోణాన్ని పరిచయం చేస్తుంది. నేను వీటిని చక్కగా మరియు చిన్నగా ఉంచాను, కాబట్టి మీరు ఒక నిర్దిష్ట భాగాన్ని బ్రష్ చేయాల్సిన అవసరం వచ్చినప్పుడు మీరు వాటిని తరువాత సూచించవచ్చు. కోర్సు యొక్క రెండవ భాగం వాస్తవ-ప్రపంచ ఉదాహరణగా మారుతుంది, మనం ఎదుర్కొంటున్న అనేక సాధారణ లేఅవుట్ సమస్యలను త్వరగా మరియు సులభంగా పరిష్కరించడానికి ఫ్లెక్స్‌బాక్స్‌ను ఎలా ఉపయోగించవచ్చో వివరిస్తుంది.

ఫ్లెక్స్‌బాక్స్‌కు పూర్తి గైడ్

మీరు ఫ్లెక్స్‌బాక్స్ యొక్క హాంగ్‌ను పొందిన తర్వాత, మీరు శిక్షణా సామగ్రిని పక్కన పెట్టవచ్చు. అయితే, దృశ్య సూచనను సులభంగా ఉంచడానికి ఇది సహాయపడుతుంది. క్రిస్ కోయెర్ నుండి వచ్చిన ఈ అద్భుతమైన వనరు 13 వేర్వేరు ఫ్లెక్స్‌బాక్స్ లక్షణాలను విచ్ఛిన్నం చేస్తుంది, ఇవి ఫ్లెక్స్ కంటైనర్‌కు వర్తిస్తాయి మరియు ఇవి నేరుగా ఫ్లెక్స్ ఐటెమ్‌లకు వర్తిస్తాయి.

ఫ్లెక్స్‌బగ్స్

ఫ్లెక్స్‌బాక్స్ తప్పు లేకుండా లేదు, మరియు ఏదైనా మాదిరిగా, మీరు తెలుసుకోవలసిన కొన్ని క్రాస్ బ్రౌజర్ బగ్‌లు మరియు పరిష్కారాలు ఉన్నాయి. ఫ్లెక్స్‌బగ్స్ తెలిసిన ఫ్లెక్స్‌బాక్స్ బగ్‌ల శ్రేణిని వివరిస్తుంది, అలాగే పరిష్కారాలు మరియు పరిష్కారాలను అందిస్తుంది.