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

ఈ పరివర్తన లేఅవుట్ సాధనాల గురించి డిజైనర్లు ఏమి తెలుసుకోవాలి.

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

లేఅవుట్ కోసం ఈ పాత పద్ధతుల యొక్క స్వల్ప-కాలాలు ప్రతిస్పందించే వెబ్ డిజైన్‌తో మరింత స్పష్టంగా కనిపించాయి, దీనిలో వెబ్ యొక్క ద్రవత్వాన్ని స్వీకరించడం ప్రాథమికమైనది.

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

Flexbox

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

మెరుగైన చుట్టడం

రెస్పాన్సివ్ వెబ్ డిజైన్‌లో, వీక్షణపోర్ట్ వెడల్పు పరిమాణాలను మార్చడంతో అందుబాటులో ఉన్న వెడల్పు మారుతుంది. ఇది అనుకోని కంటెంట్ చుట్టడానికి దారితీస్తుంది, ప్రత్యేకించి కంటెంట్ రూపకల్పన కంటే ఎక్కువ పొడవుగా ఉన్నప్పుడు లేదా కంటెంట్ కంటైనర్ చాలా ఇరుకైనది. మనమందరం ఇంతకు మునుపు చూశాము: డిజైన్ 'ఆదర్శ' కంటెంట్ పొడవుకు కారణమవుతుంది, కానీ అది అమలు చేయబడి, నిజమైన కంటెంట్ జోడించబడిన వెంటనే, కంటెంట్ తదుపరి పంక్తికి చుట్టబడుతుంది ఎందుకంటే తగినంత స్థలం లేకపోవడం లేదా దాని నుండి విచ్ఛిన్నం కావడం కంటైనర్. రెండూ అనువైనవి కావు మరియు లేఅవుట్లు విచ్ఛిన్నమవుతాయి.

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

ఫ్లెక్స్‌బాక్స్‌తో మెరుగైన చుట్టడానికి ఉదాహరణ

ఫ్లెక్స్‌బాక్స్ ఈ సమస్యను పరిష్కరిస్తుంది, అందుబాటులో ఉన్న స్థలాన్ని సద్వినియోగం చేసుకోవడానికి మరియు కంటెంట్ లేనప్పుడు దాన్ని చుట్టడానికి మాకు వీలు కల్పిస్తుంది. ఈ స్వీయ-సర్దుబాటు ప్రవర్తన సౌకర్యవంతంగా ఉంటుంది, కానీ నిర్వహణ సామర్థ్యాన్ని మెరుగుపరుస్తుంది ఎందుకంటే స్టైలింగ్‌ను మాన్యువల్‌గా సర్దుబాటు చేయడానికి మేము బ్రేక్‌పాయింట్‌పై ఆధారపడవలసిన అవసరం లేదు. పై ఉదాహరణ ఈ ప్రవర్తనను ప్రదర్శిస్తుంది: తగినంత స్థలం అందుబాటులో ఉంటే టైటిల్ ప్రక్కనే ఉన్న స్థాన లేబుల్‌ను ప్రదర్శించండి మరియు తగినంత స్థలం అందుబాటులో లేకపోతే టైటిల్‌కు దిగువన ఉన్న స్థాన లేబుల్‌ను సమలేఖనం చేయండి.

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

మెరుగైన అంతరం & అమరిక

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

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

ఫ్లెక్స్‌బాక్స్‌తో మెరుగైన స్థల పంపిణీకి ఉదాహరణ

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

మూల ఆర్డర్

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

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

ఫ్లెక్స్‌బాక్స్‌తో ఐటెమ్ ఆర్డరింగ్ యొక్క ఉదాహరణ

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

గ్రిడ్ లేఅవుట్

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

పర్పస్ కోసం సరిపోతుంది

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

గ్రిడ్‌తో, మాకు ఇకపై గ్రిడ్ ఫ్రేమ్‌వర్క్ అవసరం లేదు - ఇది CSS లోకి కాల్చిన స్థానిక ఫ్రేమ్‌వర్క్. వెబ్ యొక్క డిఫాల్ట్ ద్రవత్వాన్ని స్వీకరించేటప్పుడు, CSS లో లేఅవుట్ను స్పష్టమైన మార్గంలో నిర్వచించడానికి ఇది మాకు అనుమతిస్తుంది. ఈ క్రొత్త లేఅవుట్ సాధనం యొక్క సామర్థ్యాలు అంతులేనివి, మరియు ఇది రాకముందే జావాస్క్రిప్ట్‌తో మాత్రమే సాధ్యమయ్యే లేఅవుట్‌లను సాధించడానికి ఇది మాకు సహాయపడుతుంది.

గ్రిడ్ లేఅవుట్ యొక్క ఉదాహరణ

నెక్స్ట్-జనరేషన్ వెబ్ లేఅవుట్లు

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

ప్రతిస్పందించే వెబ్ డిజైన్ రాక పేజీ లేఅవుట్ కోసం కొన్ని కొత్త ఆలోచనలను ప్రారంభించింది మరియు దానితో కొన్ని మంచి నమూనాలు వెలువడటం ప్రారంభించాయి: సైడ్‌బార్‌ను త్రవ్వండి, డిజైన్‌ను సరళీకృతం చేయండి మరియు కంటెంట్‌పై దృష్టి పెట్టండి. కానీ సర్వత్రా మారిన నమూనాలు కూడా బయటపడటం మనం చూస్తున్నాము, “అన్ని వెబ్‌సైట్‌లు ఒకేలా కనిపిస్తాయి” అనే ఆశ్చర్యార్థకాన్ని మేము వింటున్నాము.

గ్రిడ్ లేఅవుట్ మేము ఉన్న లేఅవుట్ నుండి నిష్క్రమించడానికి మరియు తదుపరి తరం లేఅవుట్‌లను నిర్మించడానికి అవసరమైన సాధనాలను మాకు ఇస్తుంది. ప్రతి ఇతర ప్రతిస్పందించే వెబ్‌సైట్‌లో కనిపించే సాధారణ రూపకల్పన నమూనాలకు బలవంతం చేయడానికి బదులుగా మేము చివరకు కంటెంట్‌ను నిర్మించవచ్చు.

హెచ్చరిక యొక్క పదం

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

ఇంకా చాలా ఉన్నాయి. చాలా ఎక్కువ.

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

Flexbox

గ్రిడ్

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

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