CSS Flexbox क्या है - ldkalink

-
CSS Flexbox kya hai: इसका उपयोग तब किया जाता है जब हम चाहते हैं कि एक फ्लेक्स कंटेनर (flex-container) के अंदर कई सारे फ्लेक्स आइटम (flex-items) हो।

फ्लेक्स बॉक्स मॉडल का उपयोग करने के लिए सबसे पहले हमें एचटीएमएल में एक फ्लेक्स कंटेनर को परिभाषित करना होता है।

जैसे कि आप नीचे एक इमेज में देख सकते हैं कि एक फ्लेक्स कंटेनर (यह ब्लू एरिया) के अंदर तीन फ्लेक्स आइटम जो की एक के बाद एक एक रो में दिखाई दे रहे है। 

CSS Flexbox क्या है
CSS Flexbox kya hai

CSS Flexbox layout module


पहले समय में जब फ्लेक्स बॉक्स लेआउट मॉडल का उपयोग नहीं किया जाता था तब इससे पहले फोर लेआउट मॉडल का उपयोग किया जाता था: 
  • Blocks, एक वेब पेज में जब क्षेत्र क्रिएट करना होता था तब इसके लिए ब्लॉक का उपयोग किया जाता था।
  • Inline, इसका उपयोग टेक्स्ट के लिए किया जाता था
  • Table,  टू डाइमेंशनल टेबल डाटा के लिए इसका यूज किया जाता था
  • Positioned, एलिमेंट्स की स्थिति को दर्शाने के लिए

इस फ्लैक्सिबल बॉक्स लेआउट मॉडल की सहायता से बड़ी ही आसानी से बिना किसी प्लाट या पोजिशनिंग का उपयोग किए बिना ही एक रेस्पॉन्सिव लेआउट स्ट्रक्चर डिजाइन कर सकते हैं। 

Flex box properties कौन से browser support करते है 

सभी तरह के मॉडर्न ब्राउज़र जिनका उपयोग अक्सर किया जाता है इन सभी के द्वारा फिल बॉक्स मॉडल को सपोर्ट किया जाता है जैसे की
  • ओपेरा 48
  • क्रोम 29.0
  • सफारी 10
  • मोंजिला 22.0
  • माइक्रोसॉफ्ट एज 11.0

उदाहरण

एक फ्लेक्स कंटेनर के साथ तीन फ्लेक्स आइटम्स:

HTML  CODE

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS CODE

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

Note: फ्लेक्सिबल लेआउट जो की एक पैरंट एलिमेंट के रूप में होना चाहिए और इसके अंदर display प्रॉपर्टी में flex सेट होना चाहिए। 

जब फ्लैक्सिबल लेआउट कंटेनर के अंदर चाइल्ड एलिमेंटस का उपयोग किया जाता है तो यह चाइल्ड एलिमेंट से डायरेक्ट ऑटोमेटेकली फ्लेक्स आइटम में सेट हो जाते हैं।

आने वाले आर्टिकल में हम फ्लेक्स कंटेनर और रिफ्लेक्शन आइटम के बारे में और अधिक विस्तार से जानने वाले है।

Related pages

CSS Tutorial: CSS Padding सीएसएस में पैडिंग का उपयोग क्यों किया जाता है जानने के लिए इसे जरूर पढ़े। 
CSS Tutorial: CSS Background Image सीएसएस में बैकग्राउंड इमेज कैसे लगते है यह भी जाने। 
CSS Tutorial: CSS Breadcrumbs क्या है यह SEO में कैसे इम्पोर्टेन्ट रोल प्ले करता है जाने।  

Popular Posts

Fake smile Quotes in Hindi - ldkalink

-
Fake smile Quotes in Hindi:  इस आर्टिकल में  fake smile status  से रिलेटेड बहुत सारे  words  और shayari है यदि आप sad fake smile quotes Hindi me  for girls and boys चाहते है तो आप सही जगह पर है।  
view answer

संतुलित बल और असंतुलित बल - ldkalink

-
संतुलित बल और असंतुलित बल (balanced and unbalanced force): इससे पहले वाले आर्टिकल में हमने बल के बारे में विस्तार से जाना था पर अभी हम Santulit bal और  asantulit bal के बारे में उदाहरण के साथ जानने वाले है। 
view answer

image file formats क्या है - ldkalink

-
Image file format  क्या है: 10 Type of image format   list में इमेज के कई प्रकार होते है और इन सब का उपयोग इनके जरूरत के आधार पर अलग समय में अलग अलग जगह पर किया जाता है कुछ इमेज फॉर्मेट जैसे की jpeg, png, raw, tiff, gif, pdf, psd, indd,   eps, Ai आदि है।    इन सभी तरह के इमेज फॉर्मेट का उपयोग कब और कैसे किया जाता है इसके बारे में www.ldkalink.com पर निचे विस्तार से बताया गया है।  image file format क्या है 10 Types of image file extensions आज हम उन सभी  image file formats in Hindi   के बारे में  Examples के साथ   बात करने वाले है जो अलग अलग तरह के  image file extensions  के लिए multimedia के रूप में computer तथा mobiles में यूज़ किये जाते है।    JPEG (JPG) - joint photographic experts group  PNG (portable network graphics) GIF (graphics interchange format) TIFF (tagged image file format) Raw - Raw image formats PDF (portable document format) PSD (Photoshop document) INDD (in Design document)  EPS (encapsula...
view answer

पैन कार्ड पर पिता के ही नाम क्यों लिखे जाते हैं

-
पैन कार्ड पर पिता के ही नाम क्यों लिखे जाते हैं ( Why is father name on PAN card ) : आज के इस आर्टिकल में हम जानने वाले हैं कि पैन कार्ड पर पिता के नाम ही क्यों लिखे जाते हैं। 
view answer

खुद को मोटीवेट करते रहने के लिए motivational stories हमेशा पढ़ते रहे

-
motivational stories in Hindi : आज हम आपके सामने छोटी सी ज्ञान वाली महान लोगों की संघर्ष से सफलता की प्रेरणादायक ( motivational ), मोरल (moral) कहानी आपके सामने लेकर आए हैं जो आपको ज्ञान देने वाली कहानी से लेकर आपकी सोच बदल देने वाली कहानी में से एक है। 
view answer

बीजांक (Bijank) किसे कहते हैं इसका उपयोग गणना की जाँच करने के लिए कैसे किया जाता है, आइये इसे कई तरह से उदाहरण से समझते है

-
बीजांक (Digital root) बीजांक (Digital root or Digital sum) : आज हम जानने वाले है की बीजांक क्या है  (Bijank kya hai)  है यह किसी भी दी गई संख्या के अंकों का एक योग होता है और इसे तब तक जोड़ा जाता है जब तक की एक अंक वाली संख्या प्राप्त न हो जाए। 
view answer

अभ्यास ही सफलता की कुंजी motivational story - ldkalink

-
अभ्यास ही सफलता की कुंजी motivational story in Hindi: आज के इस आर्टिकल में हम अभ्यास ही सफलता की कुंजी होती है को प्रेरणादायक कहानी (prernadayak kahani) को एक साधारण से कहानी के रूप में समझने वाले हैं। 
view answer

blogger template कैसे create करे from scratch - ldkalink

-
Custom blogger template कैसे बनाये: ब्लॉगर यह एक content management system (CMS) है यहाँ से हम अपने लिए एक website create कर इसकी सहायता से अपने नॉलेज को बड़ी ही आसानी से लोगो तक पहुंचा सकते है।    website या Blog बनाने के लिए एक Domain name के साथ एक Template की भी जरूरत होती है क्यों हर साइट का अपना    एक   अलग नाम और लुक होता है internet पर कभी भी एक नाम के दो साइट नहीं हो सकते है।  वैसे तो इंटेंटनेट पर कई सारे पहले से बना हुआ फ्री और पेड दोनों तरह के टेम्पलेट मौजूद होते है free वाले टेम्पलेट में कुछ लिमिटेशन होता है और पेड वर्शन में कुछ सुविधाएं और दे दी जाती है।  पर इसे हम अपने तरीके से पूरी तरह कस्टमाइज नहीं कर सकते है इसलिए हमें एक कस्टम ब्लॉगर टेम्पलेट क्रिएट करने की जरूरत होती है जिसे हम अपने तरीके से बना सकते है। लेकिन यदि आप खुद से यानि blogger में manual method से Custom template कैसे create करते है इसके बारे में जानना चाहते है तो आज से इस आर्टिकल में हम how to make a blogger template हिंदी में सिखने वाले है यानि blogger में custom templ...
view answer

अदिश राशि और सदिश राशि में अंतर - ldkalink

-
अदिश राशि (scalar quantity) और सदिश राशि (vector quantity): आज हम अदिश राशि और सदिश राशि के बारे में बात करने वाले है की आखिर adish rashi (scalar quantity) और sadish rashi (vector quantity) में anter (difference) क्या होता क्या होता है।  कौन कौन से राशि अदिश और सदिश राशि होती है और अदिश राशि तथा सदिश राशि की पहचान कैसे करे इन सब के बारे में आज हम इस आर्टिकल में बात करने वाले है।  अदिश राशि और सदिश राशि में अंतर अदिश और सदिश राशि में अंतर क्या है  Scalar and vector quantity definition in Hindi: सबसे पहले हम Adish rashi और sadish rashi को इसकी परिभाषा (Peribhasha) से समझते है ऐसी भौतिक रशिया जिनमे केवल परिणाम होता है अदिश राशि कहलाती है जैसे की   दूरी, छेत्रफल, द्रव्यमान, समय, तापमान, विधुत धरा, घनत्व, आयतन इत्यादि।  पर जिन राशियों में परिणाम और दिशा दोनों होती है इन्हे सदिश राशि कहते है जैसे की वेग, बल, संवेग, चुम्बकीय आघूर्ण, ताप प्रवणता, विद्युत द्विध्रुव आघूर्ण इत्यादि । अदिश राशि का उदहारण/Scalar quantity example  अदिश राशि की पहचान कैसे...
view answer

on page seo और off page seo क्या है - ldkalink

-
On-page seo vs. off-page seo: आज के इस आर्टिकल Types of SEO में हम जानेंगे की on-page SEO और off-page SEO  किसे कहते है आखिर ये दोनों होता क्या है इसे हम इसकी परिभाषा और example  से भी समझने का प्रयास करेंगे। इसके अलावा black hat seo और white hat seo क्या है  क्या यह भी seo के ही प्रकार है या फिर ये दोनो seo करने के techniques है अगर हम  white hat और black hat  की बात करे तो ये दोनो ही  seo करने की techniques है  यानि content को optimize करने के तरीके है।  Black hat seo और white hat seo में कौन कौन सी techniques का use किया जाता है इसके बारे में हम पिछले आर्टिकल में step by step जाना था यदि आपने यह आर्टिकल नहीं पढ़ा है तो इसे एक बार जरूर पढ़े और इसके साथ ही Technical seo क्या है इसमें कौन कौन से तरीका use किया जाता है इसके बारे में पूरा विस्तार से जानेंगे।  Types of seo - on page seo और off page seo क्या है आप सभी जानते है की हर काम को करने के दो तरीके होते ही है पहला जो गलत तरीके से किया जाता है और दूसरा सही तरीके से, जब सही तरीके से...
view answer

Translate