CSS Flexbox को आसानी से समझें! इस comprehensive guide में हम flex container, flex items, justify, align, और gap properties को detail में cover करेंगे।
CSS Flexbox मास्टरक्लास: Layouts को आसान बनाएं
Web development की दुनिया में layout design करना कभी-कभी एक बड़ा challenge बन जाता है। अगर आप भी floats और positioning से परेशान हैं, तो CSS Flexbox आपके लिए एक game-changer साबित होगा। Vivaa Technologies में हम हमेशा students और developers को modern और efficient web development techniques सिखाने पर जोर देते हैं। इस article में हम Flexbox के हर एक core concept को बिल्कुल simple और practical तरीके से समझेंगे।
Flexbox क्या है?
CSS Flexbox (Flexible Box Layout Module) एक one-dimensional layout model है, जो elements को row या column में arrange करने, align करने, और space distribute करने के लिए use होता है। इसकी मदद से complex layouts को बिना किसी extra floats या clear fixes के easily बनाया जा सकता है।
Flex Container और Flex Items
Flexbox को use करने के लिए सबसे पहले हमें एक parent element को flex container बनाना पड़ता है। इसके अंदर के direct children automatically flex items बन जाते हैं।
CSS
.parent-container {
display: flex;
}
जब आप display: flex या display: inline-flex apply करते हैं, तो container के अंदर के सभी items पर flexible behavior activate हो जाता है।
Main Axis और Cross Axis
Flexbox दो axes पर काम करता है:
Main Axis: यह वह direction होती है जिसमें flex items normally place होते हैं (default row में left से right)।
Cross Axis: यह main axis के perpendicular (90-degree angle पर) होती है (default top से bottom)।
Justify-Content: Main Axis Alignment
Items को main axis के along align करने के लिए हम justify-content property का use करते हैं। इसकी कुछ popular values हैं:
flex-start: Items को container के start में align करता है।flex-end: Items को container के end में align करता है।center: Items को container के बीच में center करता है।space-between: Items के बीच में equal space देता है, पर edges पर कोई space नहीं होती।space-around: Items के around equal space distribute करता है।space-evenly: सभी items के बीच और edges पर बिल्कुल बराबर space रखती है।
CSS
.flex-container {
display: flex;
justify-content: space-between;
}
Align-Items: Cross Axis Alignment
Cross axis के along items को align करने के लिए align-items property use होती है:
stretch: Items default stretch होकर container की height ले लेते हैं।flex-start: Cross axis के start पर align करता है।flex-end: Cross axis के end पर align करता है।center: Cross axis के center में align करता है।baseline: Items के text baseline के हिसाब से align करता है।
CSS
.flex-container {
display: flex;
align-items: center;
}
CSS Gap Property: Spacing Made Easy
पहले के समय में items के बीच space देने के लिए margins का use करना पड़ता था, जिससे unwanted spacing issues आते थे। अब CSS में gap property आ चुकी है, जो flex container के अंदर items के बीच direct spacing provide करती है।
CSS
.flex-container {
display: flex;
gap: 20px;
}
आप row-gap और column-gap का अलग-अलग भी use कर सकते हैं।
Conclusion
CSS Flexbox modern web design का एक essential tool है। इसको समझने के बाद responsive layouts बनाना बेहद आसान हो जाता है। अगर आप एक professional full-stack developer बनना चाहते हैं, तो इन concepts की practice ज़रूर करें। Vivaa Technologies पर हम ऐसे ही practical tutorials और courses के साथ आपके career को boost करने में मदद करते हैं। Practice करते रहिए और code build करते रहिए!
