Google search engine

Flex क्या है CSS display flex और इसका इस्तेमाल हिंदी में

आखिरकार flex क्या है display flex का इस्तेमाल website में बहुत सारे box, text, image आदि चीज़ों को एक ही line में रखने के लिए और 2 लाइन में तोड़ने के लिए या जब हम screen छोटी करे तो एक box दूसरे box के नीचे आ जाए यानि कि responsive design के लिए और पहला box left में दूसरा box right side में आ जाए आदि चीज़ों को manage करने के लिए display flex का इस्तेमाल किया जाता है.

आज हम जानेंगे flex क्या है flex का मतलब हम किसी भी webpage के box, column, alignment को बहुत जल्दी manage कर सकते है पहले हम flex कि जगह float का इस्तेमाल कर website को manage करते थे flex में बहुत सारी property है जिनका इस्तेमाल website को manage करने के लिए करते है.

display flexक्या है
Display Flex क्या है

Flex property क्या है हिंदी में – Flex property in CSS

जब हम बहुत सारे image, text, box आदि चीज़ों को केवल left side, right side, center में एक ही line में तथा एक box बनाने के बाद कोई दूसरा box add करने पर नीचे की line में शुरू हो आदि चीज़ों के लिए हम CSS flex property का इस्तेमाल करते हैं. flex property को हम केवल html के साथ flex class लगाकर भी इस्तेमाल कर सकते हैं जिसके बाद हमें CSS लिखने की जरुरत नहीं होती हैं या हम CSS में flex class लगाकर flex का इस्तेमाल करते हैं.

CSS display flex क्या है और bootstrap 4 में display flex

जब हम अपने website पर 2 box बनाते है तो दूसरा box by default पहले box के नीचे आता है वह दोनों एक ही line में नहीं आते है. अगर हमें किसी box को एक ही line यानि की left से right लाना है तो हम display flex का इस्तेमाल करते है. display flex की जगह हम inline flex का इस्तेमाल भी कर सकते हैं.

जिससे सारे box एक ही line में आएंगे flex हमेशा parent div पर काम करता हैं जैसे – एक बड़ा box हैं उस box के अंदर 3 छोटे-छोटे box हैं बड़ा box parent div हैं तथा सारे छोटे box child div हैं flex को हम केवल html के साथ भी लिख सकते हैं.

जिसके बाद हमें CSS लिखने की जरुरत नहीं होती है html में हम class के अंदर d-flex का इस्तेमाल करते है दूसरा तरीका हम CSS से box class में display : flex दे सकते है. Flex क्या है इसके बारे में जानने के लिए पूरा article जरूर पढ़े.

CSS flex direction क्या है

CSS flex direction के द्वारा हम किसी भी box को एक ही line में यानि की left से right की तरफ, right से left की तरफ तथा एक box ऊपर से नीचे की तरफ या नीचे से ऊपर की तरफ रख सकते हैं जिसे flex direction कहते हैं. flex direction के साथ हमेशा display flex का इस्तेमाल किया जाता है flex direction तब काम करता है जब हम उसके साथ flex का इस्तेमाल करते हैं.

Flex direction row

अगर हमें box को एक ही line में left side से शुरू करना है तो हम flex direction row का इस्तेमाल करते है. केवल html द्वारा flex-direction देने के लिए html class में d-flex के साथ row का इस्तेमाल करते हैं. जिसके बाद हमें CSS लिखने की जरुरत नहीं होती है दूसरा तरीका हम CSS से flex-direction: row; का इस्तेमाल करते है.

Flex direction row reverse

हमें box को अगर एक ही line में left side के बजाय right side से शुरू करना है तो हम flex direction row reverse का इस्तेमाल करते हैं. केवल html द्वारा flex direction row reverse देने के लिए html class में flex के साथ row-reverse का इस्तेमाल करते हैं जिसके बाद हमें CSS लिखने की जरुरत नहीं होती हैं. अगर हमें CSS के द्वारा row reverse देना हैं तो हम html class के साथ CSS में flex-direction: row-reverse; देते हैं.

Flex direction column

अगर हमें एक box के बाद दूसरा box अगली line में रखना हैं यानि की ऊपर से नीचे की side रखना हैं तो हम flex direction column का इस्तेमाल करते हैं. केवल html द्वारा flex direction column देने के लिए html class में flex-column का इस्तेमाल करते हैं CSS द्वारा flex direction column देने के लिए flex-direction: column; का इस्तेमाल करते हैं.

Flex direction column reverse

किसी box को एक line के बाद दूसरी line रखना है यानि की ऊपर से नीचे की side रखना है तो हम flex direction column का इस्तेमाल करते है. केवल html द्वारा flex direction column देने के लिए html class में flex-column का इस्तेमाल करते है CSS द्वारा flex direction column देने के लिए flex-direction: column; का इस्तेमाल करते है.

CSS Justify Content

CSS में Justify Content के द्वारा हम किसी भी box को left, center, right align तथा बहुत सारे box के बीच में समान gap तथा box के चारों तरफ समान gap दे सकते है.

Justify Content Start

Justify content start के द्वारा हम किसी भी box को left side align कर सकते है. केवल html द्वारा box को left align करने के लिए हम html class में d-flex के साथ justify-content-start का इस्तेमाल करते है CSS द्वारा box को left align करने के लिए justify-content: flex-start; का इस्तेमाल करते है.

Justify Content Center

Justify content center के द्वारा हम बहुत सारे box को page के center में रख सकते हैं केवल html द्वारा box को center align करने के लिए हम html class में d-flex के साथ justify-content-center लिखते हैं. CSS द्वारा box को center align करने के लिए justify-content: center; का इस्तेमाल करते हैं.

Justify content Flex end

flex end के द्वारा हम किसी भी box को page के right side या page के last में रख सकते हैं. केवल html द्वारा box को right align या last में रखने के लिए html class में d-flex के साथ justify-content-end का इस्तेमाल करते हैं. और CSS द्वारा page को right align करने के लिए justify-content: flex-end; का इस्तेमाल करते हैं.

Justify content space between

अगर हमें बहुत सारे box के बीच में बराबर gap चाहिए उसके लिए हम justify content space between का इस्तेमाल करते हैं. केवल html द्वारा box में बराबर gap देने के लिए html class में d-flex के साथ justify-content-between का इस्तेमाल करते हैं CSS द्वारा box में बराबर gap देने के लिए justify-content: space-between; का इस्तेमाल करते हैं.

Justify content around

हमें अगर बहुत सारे box के चारों तरफ बराबर gap देना हो तो हम justify content space around का इस्तेमाल करते हैं. केवल html द्वारा box में बराबर gap देने के लिए html class में d-flex के साथ justify content around का इस्तेमाल करते हैं CSS द्वारा box में gap देने के लिए justify-content: space-between; का इस्तेमाल करते हैं.

CSS align items

Text, बहुत सारे छोटे-बड़े box तथा किसी भी element को एक ही line में webpage के top से start कर सकते हैं. सभी box को ऊपर से नीचे की तरफ center में रख सकते है या सभी box को page के last से शुरू कर सकते है.

Align items flex start

हम Align items flex start के द्वारा हम बहुत सारे छोटे बड़े box या text को page के top से start कर सकते हैं flex-start की जगह हम केवल align-items-start का इस्तेमाल भी कर सकते है. html द्वारा top से start करने के लिए html class में d-flex के साथ align-items-start का इस्तेमाल करते है CSS द्वारा box top से start करने के लिए align-items: flex-start; का इस्तेमाल करते है.

HTML और CSS द्वारा align items start –

Align items center

Align items center के द्वारा हम छोटे बड़े box को ऊपर तथा नीचे की स्थिति में center कर सकते है केवल html द्वारा बहुत सारे box को center align रखने के लिए html class में d-flex के साथ align-items-center का इस्तेमाल करते है CSS द्वारा box को center align करने के लिए align-items: center; का इस्तेमाल करते है.

Align items flex end

flex end के द्वारा हम बहुत सारे छोटे बड़े box को ऊपर से नीचे की स्थिति में main box के last में रख सकते है. html द्वारा सभी box को main box के last में रखने के लिए align-items-end का इस्तेमाल करते है CSS द्वारा box को end में रखने के लिए align-items: flex-end; का इस्तेमाल करते है.

Align items stretch

Align items stretch के द्वारा हम main-box के अंदर child-box की height को main-box की height के हिसाब से रख सकते है जिसमें child-box का content अपनी जगह रहता है लेकिन background color और border color main-box के हिसाब से stretch हो जाता है. केवल html द्वारा align-items-stretch करने के लिए box के साथ d-flex में align-items-stretch का इस्तेमाल करते है और CSS द्वारा child-box को stretch करने के लिए align-items: stretch; का इस्तेमाल करते है.

CSS Flex wrap

हम जब बहुत सारे box बनाते है एक line में box खत्म हो जाने के बाद box को हम दूसरे line में space के हिसाब से तोड़ सकते है तथा एक ही line में भी रख सकते है या box को हम दूसरी line से पहली line की तरफ उल्टा चला सकते है.

Flex wrap no-wrap

Flex wrap no-wrap के द्वारा हम box को एक ही line में रख सकते है एक line में box complete हो जाने के बाद box दूसरी line में नहीं टूटता है html द्वारा box को एक ही line में रखने के लिए d-flex के साथ flex-nowrap का इस्तेमाल करते है CSS द्वारा box को एक ही line में रखने के लिए flex-wrap: no-wrap; का इस्तेमाल करते है.

केवल html द्वारा flex wrap no-wrap –

Flex wrap wrap

CSS flex wrap के द्वारा हम box एक line में खत्म हो जाने के बाद अगली line में तोड़ सकते है html द्वारा box को अगली line में तोड़ने के लिए box में d-flex के साथ flex-wrap का इस्तेमाल करते है CSS द्वारा box को दूसरी line में तोड़ने के लिए flex-wrap: wrap; का इस्तेमाल करते है.

CSS flex wrap reverse

flex wrap reverse के द्वारा हम box को दूसरी line से पहली line की तरफ शुरू कर सकते है यानि कि box इसमें पहली line के बजाए दूसरी line के last से शुरू होता है. केवल html द्वारा उल्टा box चलाने के लिए box में d-flex के साथ का इस्तेमाल करते है. html और css द्वारा box को उल्टा चलाने के लिए flex-wrap: reverse; का इस्तेमाल करते है.

Flex क्या है CSS display flex और Flex property के बारे में सरल भाषा में समझाया गया है अगर आपको flex से संबंधित कोई परेशानी हो आप नीचे comment box में अपने सवाल पूछ सकते है. Flex क्या है ज्यादा जानकारी के लिए आप bootsrap की website से पढ़ सकते है.

jeewan.basera@gmail.comhttps://hindischool.net
Jeewan, मै hindischool.net का foundur हूँ मै एक professional web designer और graphic designer हूँ मुझे इस क्षेत्र में 4 साल का अनुभव है और यहाँ में अपने अनुभव को blog के जरिये लोगों के साथ शेयर करता हूँ मुझे हिंदी मै blog लिखना पसंद है, graphic और website से संबंधित किसी भी प्रकार की सहायता के लिए आप social media या comment के जरिए अपने सवाल पूछ सकते है.

Related Articles

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

21,570FansLike
3,432FollowersFollow
0SubscribersSubscribe

Latest Articles