CSS Flexbox అంటే ఏమిటి?
CSS Flexbox (Flexible Box Layout) అనేది ఒక వరుస లేదా నిలువు వరుసలో స్థలాన్ని పంచుకోవడానికి మరియు అంశాలను సమలేఖనం చేయడానికి ఒక-పరిమాణ లేఅవుట్ మోడల్. flex కంటైనర్ display: flex తో నిర్వచించబడుతుంది మరియు దాని ప్రత్యక్ష పిల్లలు flex అంశాలు అవుతాయి. ముఖ్యమైన కంటైనర్ లక్షణాలు: flex-direction (వరుస లేదా నిలువు వరుస), flex-wrap (ఒకే vs. బహుళ-వరుస), justify-content (ప్రధాన-అక్షం సమలేఖనం), align-items (ప్రతి వరుసకు క్రాస్-అక్షం సమలేఖనం), మరియు align-content (బహుళ వరుసల క్రాస్-అక్షం సమలేఖనం). ముఖ్యమైన అంశం లక్షణాలు: flex-grow (అంశం ఎంత పెరుగుతుంది), flex-shrink (ఎంత తగ్గుతుంది), flex-basis (ప్రారంభ పరిమాణం), మరియు align-self (నిర్దిష్ట అంశానికి కంటైనర్ యొక్క align-items ని ఓవర్రైడ్ చేస్తుంది). Flexbox నావిగేషన్ బార్లు, కార్డ్ వరుసలు, కేంద్రీకృత లేఅవుట్లు మరియు ఏదైనా ఒక-పరిమాణ అమరికకు అనువైనది.
CSS Flexbox జనరేటర్ను ఎలా ఉపయోగించాలి
-
డ్రాప్డౌన్లు మరియు ఇన్పుట్ ఉపయోగించి కంటైనర్ లక్షణాలను (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) సర్దుబాటు చేయండి.
-
ఎంచుకోవడానికి ప్రివ్యూలో ఏదైనా అంశంపై క్లిక్ చేయండి (నారింజ రంగులోకి మారుతుంది).
-
అంశం ప్యానెల్లో ఎంచుకున్న అంశం యొక్క flex-grow, flex-shrink, flex-basis మరియు align-self సెట్ చేయండి.
-
మరిన్ని అంశాలు జోడించడానికి '+ అంశం జోడించండి' క్లిక్ చేయండి; ఎంచుకున్న అంశాన్ని తొలగించడానికి 'తొలగించండి' క్లిక్ చేయండి.
-
రూపొందించిన కోడ్ను చూడటానికి CSS మరియు HTML ట్యాబ్ల మధ్య స్విచ్ చేయండి, తర్వాత కాపీ చేయండి క్లిక్ చేయండి.
-
డిఫాల్ట్ 3-అంశం లేఅవుట్తో మళ్ళీ ప్రారంభించడానికి 'అన్నీ రీసెట్ చేయండి' క్లిక్ చేయండి.