परिपूर्ण फ्लेक्सबॉक्स लेआउट तयार करा

आमच्या अंतर्ज्ञानी ड्रॅग-अँड-ड्रॉप इंटरफेससह CSS फ्लेक्सबॉक्स कोड व्हिज्युअलाइज करा, कस्टमाइझ करा आणि जनरेट करा.

कंटेनर गुणधर्म

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

कार्ड शीर्षक

कार्ड वर्णन मजकूर येथे आहे

कार्ड शीर्षक

कार्ड वर्णन मजकूर येथे आहे

कार्ड शीर्षक

कार्ड वर्णन मजकूर येथे आहे

फ्लेक्सबॉक्स गुणधर्मांचा वापर करून वेगवेगळ्या स्क्रीन आकारांशी जुळवून घेणारा एक प्रतिसादात्मक कार्ड ग्रिड.

लेख मांडणी

लेखाचे शीर्षक

१ जानेवारी २०२३ रोजी पोस्ट केले · ५ मिनिटे वाचले

लेखातील मजकूर येथे आहे. हा एक संक्षिप्त सारांश किंवा संपूर्ण लेखाचा मजकूर असू शकतो. फ्लेक्सबॉक्स प्रतिमा आणि मजकूर दृश्यमानपणे आकर्षक पद्धतीने संरेखित करण्यास मदत करतो.

डावीकडे प्रतिमा आणि उजवीकडे मजकूर असलेला एक सामान्य लेख लेआउट, मोबाइल डिव्हाइसवर रचलेला.

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

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 मध्ये रूपांतरित करा. जलद, सोपे आणि सुरक्षित.

CSS3 ट्रान्झिशन जनरेटर

गुळगुळीत अपारदर्शकता संक्रमण

SCSS ते CSS कनवर्टर

तुमचा SCSS कोड CSS मध्ये रूपांतरित करा. जलद, सोपे आणि सुरक्षित.

CSS फिल्टर जनरेटर

कस्टम CSS इमेज फिल्टर तयार करा आणि व्हिज्युअलाइझ करा

CSS त्रिकोण जनरेटर

खालील पर्यायांसह तुमचा त्रिकोण सानुकूलित करा आणि जनरेट केलेला CSS कोड त्वरित मिळवा.

मोफत CSS बटण जनरेटर

Erstellen Sie ansprechende, प्रतिसाद देणारी Schaltflächen für Ihre वेबसाइट. Wählen Sie aus über 70 vorgefertigten Stilen oder passen Sie Ihre eigenen mit unseren erweiterten Steuerelementen an.