परफेक्ट फ्लेक्सबॉक्स लेआउट बनाएं

हमारे सहज ज्ञान युक्त ड्रैग-एंड-ड्रॉप इंटरफ़ेस के साथ सीएसएस फ्लेक्सबॉक्स कोड को विज़ुअलाइज़, कस्टमाइज़ और जेनरेट करें।

कंटेनर गुण

display

flex-direction

flex-wrap

justify-content

align-items

align-content

आइटम गुण

Items

3 items

चयनित आइटम

flex-grow

flex-shrink

flex-basis

order

align-self

Preview

Item 1

Item 2

Item 3

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

जनरेट किया गया CSS कोड

वास्तविक दुनिया के उदाहरण

नेविगेशन पट्टी

Logo

Home

Products

About

Contact

बाईं ओर लोगो के साथ एक सामान्य नेविगेशन बार लेआउट, केंद्र में मेनू आइटम और दाईं ओर एक कार्ट आइकन।

Card Grid

कार्ड का शीर्षक

कार्ड विवरण पाठ यहाँ

कार्ड का शीर्षक

कार्ड विवरण पाठ यहाँ

कार्ड का शीर्षक

कार्ड विवरण पाठ यहाँ

एक उत्तरदायी कार्ड ग्रिड जो फ्लेक्सबॉक्स गुणों का उपयोग करके विभिन्न स्क्रीन आकारों के अनुकूल है।

लेख लेआउट

लेख का शीर्षक

पर प्रविष्ट किया जनवरी 1, 2023 · 5 मिनट लाल

लेख सामग्री यहाँ. यह एक संक्षिप्त सारांश या पूर्ण लेख पाठ हो सकता है। फ्लेक्सबॉक्स छवि और पाठ को नेत्रहीन आकर्षक तरीके से संरेखित करने में मदद करता है।

बाईं ओर एक छवि और दाईं ओर पाठ सामग्री के साथ एक सामान्य लेख लेआउट, मोबाइल उपकरणों पर स्टैक्ड।

डैशबोर्ड लेआउट

Header

Sidebar

मुख्य सामग्री

Footer

क्षैतिज और ऊर्ध्वाधर संरेखण दोनों के लिए फ्लेक्सबॉक्स का उपयोग करके हेडर, साइडबार, मुख्य सामग्री क्षेत्र और पाद लेख के साथ एक डैशबोर्ड लेआउट।

फ्लेक्सबॉक्स फंडामेंटल

फ्लेक्सबॉक्स क्या है?

फ्लेक्सिबल बॉक्स लेआउट, जिसे आमतौर पर फ्लेक्सबॉक्स के रूप में जाना जाता है, एक CSS3 लेआउट मॉडल है जो कंटेनर में वस्तुओं के बीच स्थान को वितरित और संरेखित करने का एक कुशल तरीका प्रदान करता है, भले ही उनका आकार अज्ञात या गतिशील हो।

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

मुख्य अवधारणाएं:फ्लेक्सबॉक्स दो मुख्य अवधारणाओं का परिचय देता है:फ्लेक्स कंटेनर and the फ्लेक्स आइटम. कंटेनर मूल तत्व है, और आइटम इसके प्रत्यक्ष बच्चे हैं।

मेन एक्सिस बनाम क्रॉस एक्सिस

फ्लेक्सबॉक्स लेआउट दो अक्षों पर आधारित हैं:main axis and the क्रॉस एक्सिस.

मुख्य धुरी:प्राथमिक अक्ष जिसके साथ फ्लेक्स आइटम बिछाए जाते हैं। द्वारा परिभाषितflex-direction.
क्रॉस एक्सिस:अक्ष मुख्य अक्ष के लंबवत। इसकी दिशा मुख्य अक्ष दिशा पर निर्भर करती है।

मुख्य अक्ष →

← क्रॉस एक्सिस

Start

Main

End

कंटेनर गुण

Property	Description
`display`	एक फ्लेक्स कंटेनर को परिभाषित करता है; दिए गए मान के आधार पर इनलाइन या ब्लॉक।
`flex-direction`	मुख्य अक्ष स्थापित करता है, इस प्रकार दिशा को परिभाषित करते हुए फ्लेक्स आइटम फ्लेक्स कंटेनर में रखे जाते हैं।
`flex-wrap`	डिफ़ॉल्ट रूप से, फ्लेक्स आइटम सभी एक लाइन पर फिट होने की कोशिश करेंगे। आप इसे बदल सकते हैं और आइटम को इस संपत्ति के साथ आवश्यकतानुसार लपेटने की अनुमति दे सकते हैं।
`justify-content`	फ्लेक्स कंटेनर की वर्तमान लाइन के मुख्य अक्ष के साथ फ्लेक्स आइटम को संरेखित करता है।
`align-items`	फ्लेक्स कंटेनर की वर्तमान लाइन के क्रॉस अक्ष के साथ फ्लेक्स आइटम को संरेखित करता है।
`align-content`	क्रॉस-अक्ष में अतिरिक्त स्थान होने पर एक फ्लेक्स कंटेनर की लाइनों को संरेखित करता है।

आइटम गुण

Property	Description
`order`	डिफ़ॉल्ट रूप से, फ्लेक्स आइटम स्रोत क्रम में रखे जाते हैं। हालांकि,`order`प्रॉपर्टी उस क्रम को नियंत्रित करती है जिसमें वे फ्लेक्स कंटेनर में दिखाई देते हैं।
`flex-grow`	यदि आवश्यक हो तो फ्लेक्स आइटम के बढ़ने की क्षमता को परिभाषित करता है। यह एक इकाई रहित मूल्य स्वीकार करता है जो अनुपात के रूप में कार्य करता है।
`flex-shrink`	यदि आवश्यक हो तो फ्लेक्स आइटम को सिकुड़ने की क्षमता को परिभाषित करता है।
`flex-basis`	फ्लेक्स कारकों के अनुसार किसी भी उपलब्ध स्थान को वितरित करने से पहले एक फ्लेक्स आइटम के प्रारंभिक आकार को परिभाषित करता है।
`align-self`	डिफ़ॉल्ट संरेखण की अनुमति देता है (या द्वारा निर्दिष्ट`align-items`) को अलग-अलग फ्लेक्स आइटम के लिए ओवरराइड किया जाना है।

Related Tools

सीएसएस ब्यूटीफायर

पेशेवर सटीकता के साथ अपने सीएसएस कोड को प्रारूपित और सुशोभित करें

स्टाइलस टू सीएसएस कन्वर्टर

अपने SCSS कोड को CSS में बदलें। तेज़, आसान और सुरक्षित।

SCSS से CSS कन्वर्टर

अपने SCSS कोड को CSS में बदलें। तेज़, आसान और सुरक्षित।

बेस 64 से JSON डिकोडर

बेस 64 एन्कोडेड स्ट्रिंग्स को तुरंत स्वरूपित JSON में कनवर्ट करें। बिना किसी डेटा अपलोड के आपके ब्राउज़र में स्थानीय रूप से काम करता है।

रोमन अंकों से संख्या परिवर्तक

चरण-दर-चरण स्पष्टीकरण के साथ रोमन अंकों को उनके संख्यात्मक समकक्षों में कनवर्ट करें

औसत कैलकुलेटर

हमारे उपयोग में आसान टूल के साथ संख्याओं के एक सेट के औसत (अंकगणितीय माध्य) की त्वरित गणना करें।