Flexbox एक CSS लेआउट मॉडल है जो आइटम्स को एक ही पंक्ति या कॉलम में व्यवस्थित करता है और उनके बीच स्थान बांटता है। यह चीट शीट हर Flexbox प्रॉपर्टी को कार्य के अनुसार समूहित करती है — कंटेनर सेटअप, दोनों अक्षों पर अलाइनमेंट, आइटम साइज़िंग और स्पेसिंग — ताकि आप सेकंडों में सही प्रॉपर्टी ढूंढ सकें।
लेआउट बनाते समय इस पेज को बुकमार्क रखें। प्रत्येक प्रॉपर्टी उसकी वैल्यू और संक्षिप्त विवरण के साथ दिखाई गई है। द्वि-आयामी लेआउट के लिए इसे <a href="/cheatsheet/css-grid">CSS Grid चीट शीट</a> के साथ उपयोग करें।
Container Setup
| Property / Value | What it does |
|---|
display: flex | Make an element a block-level flex container. |
display: inline-flex | Make a flex container that flows inline with text. |
flex-direction: row | Lay items left to right along the main axis (default). |
flex-direction: row-reverse | Lay items right to left. |
flex-direction: column | Stack items top to bottom. |
flex-direction: column-reverse | Stack items bottom to top. |
flex-wrap: nowrap | Keep all items on a single line (default). |
flex-wrap: wrap | Allow items to wrap onto multiple lines. |
flex-flow: row wrap | Shorthand for flex-direction and flex-wrap. |
Justify Content (main axis)
| Property / Value | What it does |
|---|
justify-content: flex-start | Pack items at the start of the main axis (default). |
justify-content: flex-end | Pack items at the end of the main axis. |
justify-content: center | Center items along the main axis. |
justify-content: space-between | Equal space between items, none at the edges. |
justify-content: space-around | Equal space around each item. |
justify-content: space-evenly | Equal space between items and at the edges. |
Align Items (cross axis)
| Property / Value | What it does |
|---|
align-items: stretch | Stretch items to fill the cross axis (default). |
align-items: flex-start | Align items to the start of the cross axis. |
align-items: flex-end | Align items to the end of the cross axis. |
align-items: center | Center items along the cross axis. |
align-items: baseline | Align items by the baseline of their text. |
Align Content (wrapped lines)
| Property / Value | What it does |
|---|
align-content: flex-start | Pack wrapped lines at the start of the container. |
align-content: center | Center the group of wrapped lines. |
align-content: space-between | Space wrapped lines apart, none at the edges. |
align-content: stretch | Stretch wrapped lines to fill the container (default). |
Item Properties
| Property / Value | What it does |
|---|
flex-grow: 1 | Let an item grow to fill available free space. |
flex-shrink: 0 | Prevent an item from shrinking below its basis. |
flex-basis: 200px | Set an item's initial size along the main axis. |
flex: 1 | Shorthand for grow 1, shrink 1, basis 0 — equal-width items. |
flex: 0 0 auto | Don't grow or shrink; size the item to its content. |
order: 2 | Reorder a single item without changing the HTML. |
align-self: center | Override align-items for one item. |
Spacing
| Property / Value | What it does |
|---|
gap: 1rem | Space between items, both rows and columns. |
row-gap: 1rem | Space between rows only. |
column-gap: 1rem | Space between columns only. |
CSS Flexbox चीट शीट से जुड़े सामान्य प्रश्न
justify-content और align-items में क्या अंतर है?
justify-content आइटम्स को मुख्य अक्ष (flex-direction द्वारा तय दिशा) पर स्थित करता है, जबकि align-items उन्हें क्रॉस अक्ष पर स्थित करता है। एक पंक्ति में justify-content क्षैतिज स्पेसिंग और align-items लंबवत अलाइनमेंट नियंत्रित करता है।
मैं Flexbox से किसी div को केंद्र में कैसे रखूं?
पैरेंट को display: flex सेट करें, फिर justify-content: center और align-items: center जोड़ें। यह चाइल्ड को क्षैतिज और लंबवत दोनों तरह से केंद्र में रखता है।
flex शॉर्टहैंड का क्या अर्थ है?
flex, flex-grow, flex-shrink और flex-basis का शॉर्टहैंड है। flex: 1 का अर्थ है grow 1, shrink 1, basis 0 — जिससे आइटम स्थान को समान रूप से बांटते हैं। flex: 0 0 auto आइटम को उसके कंटेंट आकार पर रखता है।
मुझे CSS Grid के बजाय Flexbox कब उपयोग करना चाहिए?
एक-आयामी लेआउट — एक ही पंक्ति या कॉलम, जैसे नेवबार या बटन ग्रुप — के लिए Flexbox उपयोग करें। जब आपको एक साथ पंक्तियों और कॉलम दोनों को नियंत्रित करना हो, ऐसे द्वि-आयामी लेआउट के लिए
CSS Grid उपयोग करें।
मैं flex आइटम्स के बीच स्थान कैसे जोड़ूं?
flex कंटेनर पर gap प्रॉपर्टी उपयोग करें, उदाहरण के लिए gap: 1rem। यह किनारों पर मार्जिन जोड़े बिना आइटम्स के बीच स्थान जोड़ता है। प्रत्येक दिशा नियंत्रित करने के लिए row-gap या column-gap उपयोग करें।
मैं HTML बदले बिना flex आइटम्स का क्रम कैसे बदलूं?
आइटम पर order प्रॉपर्टी सेट करें। आइटम बढ़ते order मान (डिफ़ॉल्ट 0) के क्रम में व्यवस्थित होते हैं, इसलिए order: -1 किसी आइटम को पहले और order: 2 बाद में ले जाता है — मार्कअप संपादित किए बिना।
मेरे flex आइटम्स नई पंक्ति में क्यों नहीं जा रहे?
डिफ़ॉल्ट रूप से flex कंटेनर flex-wrap: nowrap उपयोग करता है, जो सभी आइटम्स को एक पंक्ति में रखता है। flex-wrap: wrap जोड़ें ताकि जगह खत्म होने पर आइटम अगली पंक्ति में चले जाएं।
