सही फ्लेक्सबक्स सजावट सिर्जना गर्नुहोस्

हाम्रो सहज ड्रैग-एन्ड-ड्रप इन्टरफेसको साथ सीएसएस फ्लेक्सबक्स कोड कल्पना, अनुकूलन र उत्पन्न गर्नुहोस्।

कन्टेनर गुण

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;
;

उत्पन्न गरिएको सीएसएस कोड

वास्तविक संसारका उदाहरणहरू

नेभिगेसन पट्टी

Logo

Home

Products

About

Contact

बायाँमा लोगो, बीचमा मेनु वस्तुहरू, र दायाँमा कार्ट आइकनको साथ एक सामान्य नेभिगेसन बार लेआउट।

Card Grid

कार्ड शीर्षक

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

कार्ड शीर्षक

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

कार्ड शीर्षक

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

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

लेख लेआउट

लेख शीर्षक

जनवरी १, २०२३ मा प्रकाशित · ५ मिनेट पढिएको

यहाँ लेख सामग्री। यो एक संक्षिप्त सारांश वा पूर्ण लेख पाठ हुन सक्छ। फ्लेक्सबक्सले छवि र पाठलाई दृश्यात्मक रूपमा आकर्षक तरिकामा पङ्क्तिबद्ध गर्न मद्दत गर्दछ।

बायाँमा छवि र दायाँमा पाठ सामग्रीको साथ एक सामान्य लेख लेआउट, मोबाइल उपकरणहरूमा स्ट्याक गरिएको।

ड्यासबोर्ड लेआउट

Header

Sidebar

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

Footer

तेर्सो र ठाडो पङ्क्तिबद्धता दुवैका लागि फ्लेक्सबक्स प्रयोग गरेर हेडर, साइडबार, मुख्य सामग्री क्षेत्र, र फुटरको साथ ड्यासबोर्ड लेआउट।

फ्लेक्सबाकस आधारभूत

फ्लेक्सबक्स के हो?

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

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

सही फ्लेक्सबक्स सजावट सिर्जना गर्नुहोस्

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

तपाईंको एससीएसएस कोडलाई सीएसएसमा रूपान्तरण गर्नुहोस्। छिटो, सजिलो र सुरक्षित।

एससीएसएस को सीएसएस कनवर्टर

हेक्समा पाठ

पाठलाई सहजरूपमा हेक्साडेसिमल प्रतिनिधित्वमा रूपान्तरण गर्नुहोस्

दशमलव देखि अक्टलसम्म

दशमलव सङ्ख्यालाई सहजै अक्टलमा रूपान्तरण गर्नुहोस्

तापमान इकाई कनवर्टर

तपाईंको वैज्ञानिक र दैनिक आवश्यकताहरूको लागि परिशुद्धताको साथ तापमानको विभिन्न एकाइहरू बीच रूपान्तरण गर्नुहोस्