फ्लेक्सबॉक्स-संबंधित CSS प्रॉपर्टीज़

Articles

यह लेख फ्लेक्सबॉक्स से संबंधित CSS प्रॉपर्टीज़ का वर्णन करता है।

आप फ्लेक्सबॉक्स और इनलाइन-फ्लेक्सबॉक्स का उपयोग करना सीख सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-flex.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-flex.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>flex</h3>
 23            <section>
 24            <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.flex-container {
 27    display: flex;
 28    justify-content: space-between;
 29    align-items: center;
 30    background-color: lightblue;
 31    height: 100px;
 32}
 33
 34.flex-item {
 35    background-color: lightskyblue;
 36    padding: 10px;
 37    margin: 5px;
 38    width: 70px;
 39    height: auto;
 40}
 41</pre>
 42            <header><h4>HTML</h4></header>
 43<pre>
 44&lt;div class="flex-container"&gt;
 45    &lt;div class="flex-item"&gt;1&lt;/div&gt;
 46    &lt;div class="flex-item"&gt;2&lt;/div&gt;
 47    &lt;div class="flex-item"&gt;3&lt;/div&gt;
 48&lt;/div&gt;
 49</pre>
 50            <header><h4>HTML+CSS</h4></header>
 51            <section class="sample-view">
 52                <div class="flex-container">
 53                    <div class="flex-item">Item 1</div>
 54                    <div class="flex-item">Item 2</div>
 55                    <div class="flex-item">Item 3</div>
 56                </div>
 57            </section>
 58          </section>
 59        </article>
 60        <article>
 61          <h3>flex-direction</h3>
 62          <section>
 63            <header><h4>flex-direction: row</h4></header>
 64            <section class="sample-view">
 65                <div class="flex-container" style="flex-direction: row;">
 66                    <div class="flex-item">Item 1</div>
 67                    <div class="flex-item">Item 2</div>
 68                    <div class="flex-item">Item 3</div>
 69                </div>
 70            </section>
 71            <header><h4>flex-direction: row-reverse</h4></header>
 72            <section class="sample-view">
 73                <div class="flex-container" style="flex-direction: row-reverse;">
 74                    <div class="flex-item">Item 1</div>
 75                    <div class="flex-item">Item 2</div>
 76                    <div class="flex-item">Item 3</div>
 77                </div>
 78            </section>
 79            <header><h4>flex-direction: column</h4></header>
 80            <section class="sample-view">
 81                <div class="flex-container" style="flex-direction: column; height: 200px;">
 82                    <div class="flex-item">Item 1</div>
 83                    <div class="flex-item">Item 2</div>
 84                    <div class="flex-item">Item 3</div>
 85                </div>
 86            </section>
 87            <header><h4>flex-direction: column-reverse</h4></header>
 88            <section class="sample-view">
 89                <div class="flex-container" style="flex-direction: column-reverse; height: 200px;">
 90                    <div class="flex-item">Item 1</div>
 91                    <div class="flex-item">Item 2</div>
 92                    <div class="flex-item">Item 3</div>
 93                </div>
 94            </section>
 95          </section>
 96        </article>
 97        <article>
 98          <h3>justify-content</h3>
 99          <section>
100            <header><h4>justify-content: flex-start</h4></header>
101            <section class="sample-view">
102                <div class="flex-container" style="justify-content: flex-start;">
103                    <div class="flex-item">Item 1</div>
104                    <div class="flex-item">Item 2</div>
105                    <div class="flex-item">Item 3</div>
106                </div>
107            </section>
108            <header><h4>justify-content: flex-end</h4></header>
109            <section class="sample-view">
110                <div class="flex-container" style="justify-content: flex-end;">
111                    <div class="flex-item">Item 1</div>
112                    <div class="flex-item">Item 2</div>
113                    <div class="flex-item">Item 3</div>
114                </div>
115            </section>
116            <header><h4>justify-content: center</h4></header>
117            <section class="sample-view">
118                <div class="flex-container" style="justify-content: center;">
119                    <div class="flex-item">Item 1</div>
120                    <div class="flex-item">Item 2</div>
121                    <div class="flex-item">Item 3</div>
122                </div>
123            </section>
124            <header><h4>justify-content: space-between</h4></header>
125            <section class="sample-view">
126                <div class="flex-container" style="justify-content: space-between;">
127                    <div class="flex-item">Item 1</div>
128                    <div class="flex-item">Item 2</div>
129                    <div class="flex-item">Item 3</div>
130                </div>
131            </section>
132            <header><h4>justify-content: space-around</h4></header>
133            <section class="sample-view">
134                <div class="flex-container" style="justify-content: space-around;">
135                    <div class="flex-item">Item 1</div>
136                    <div class="flex-item">Item 2</div>
137                    <div class="flex-item">Item 3</div>
138                </div>
139            </section>
140          </section>
141        </article>
142        <article>
143          <h3>align-items</h3>
144          <section>
145            <header><h4>align-items: flex-start</h4></header>
146            <section class="sample-view">
147                <div class="flex-container" style="align-items: flex-start; height: 150px;">
148                    <div class="flex-item">Item 1</div>
149                    <div class="flex-item">Item 2</div>
150                    <div class="flex-item">Item 3</div>
151                </div>
152            </section>
153            <header><h4>align-items: center</h4></header>
154            <section class="sample-view">
155                <div class="flex-container" style="align-items: center; height: 150px;">
156                    <div class="flex-item">Item 1</div>
157                    <div class="flex-item">Item 2</div>
158                    <div class="flex-item">Item 3</div>
159                </div>
160            </section>
161            <header><h4>align-items: flex-end</h4></header>
162            <section class="sample-view">
163                <div class="flex-container" style="align-items: flex-end; height: 150px;">
164                    <div class="flex-item">Item 1</div>
165                    <div class="flex-item">Item 2</div>
166                    <div class="flex-item">Item 3</div>
167                </div>
168            </section>
169            <header><h4>align-items: stretch</h4></header>
170            <section class="sample-view">
171                <div class="flex-container" style="align-items: stretch; height: 150px;">
172                    <div class="flex-item">Item 1</div>
173                    <div class="flex-item">Item 2</div>
174                    <div class="flex-item">Item 3</div>
175                </div>
176            </section>
177            <header><h4>align-items: baseline</h4></header>
178            <section class="sample-view">
179                <div class="flex-container" style="align-items: baseline; height: 150px;">
180                    <div class="flex-item">Item 1</div>
181                    <div class="flex-item">Item 2</div>
182                    <div class="flex-item">Item 3</div>
183                </div>
184            </section>
185          </section>
186        </article>
187        <article>
188          <h3>flex-wrap</h3>
189          <section>
190            <header><h4>flex-wrap: nowrap</h4></header>
191            <section class="sample-view">
192                <div class="flex-container" style="flex-wrap: nowrap;">
193                    <div class="flex-item">Item 1</div>
194                    <div class="flex-item">Item 2</div>
195                    <div class="flex-item">Item 3</div>
196                    <div class="flex-item">Item 4</div>
197                    <div class="flex-item">Item 5</div>
198                    <div class="flex-item">Item 6</div>
199                    <div class="flex-item">Item 7</div>
200                    <div class="flex-item">Item 8</div>
201                    <div class="flex-item">Item 9</div>
202                </div>
203            </section>
204            <header><h4>flex-direction: wrap</h4></header>
205            <section class="sample-view">
206                <div class="flex-container" style="flex-wrap: wrap; height: 300px;">
207                    <div class="flex-item">Item 1</div>
208                    <div class="flex-item">Item 2</div>
209                    <div class="flex-item">Item 3</div>
210                    <div class="flex-item">Item 4</div>
211                    <div class="flex-item">Item 5</div>
212                    <div class="flex-item">Item 6</div>
213                    <div class="flex-item">Item 7</div>
214                    <div class="flex-item">Item 8</div>
215                    <div class="flex-item">Item 9</div>
216                </div>
217            </section>
218            <header><h4>flex-direction: wrap-reverse</h4></header>
219            <section class="sample-view">
220                <div class="flex-container" style="flex-wrap: wrap-reverse; height: 300px;">
221                    <div class="flex-item">Item 1</div>
222                    <div class="flex-item">Item 2</div>
223                    <div class="flex-item">Item 3</div>
224                    <div class="flex-item">Item 4</div>
225                    <div class="flex-item">Item 5</div>
226                    <div class="flex-item">Item 6</div>
227                    <div class="flex-item">Item 7</div>
228                    <div class="flex-item">Item 8</div>
229                    <div class="flex-item">Item 9</div>
230                </div>
231            </section>
232          </section>
233        </article>
234        <article>
235          <h3>flex-grow</h3>
236          <section>
237            <header><h4>CSS</h4></header>
238<pre class="sample">
239.item1 {
240  flex-grow: 1;
241}
242
243.item2 {
244  flex-grow: 2;
245}
246
247.item3 {
248  flex-grow: 0;
249}</pre>
250            <header><h4>HTML+CSS</h4></header>
251            <section class="sample-view">
252                <div class="flex-container">
253                    <div class="flex-item" style="flex-grow: 1;">Item 1</div>
254                    <div class="flex-item" style="flex-grow: 2;">Item 2</div>
255                    <div class="flex-item" style="flex-grow: 0;">Item 3</div>
256                </div>
257            </section>
258          </section>
259        </article>
260        <article>
261          <h3>flex-shrink</h3>
262          <section>
263            <header><h4>CSS</h4></header>
264<pre class="sample">
265.item1 {
266  flex-shrink: 0;
267}
268.item2 {
269  flex-shrink: 1;
270}
271.item3 {
272  flex-shrink: 1;
273}</pre>
274            <header><h4>HTML+CSS</h4></header>
275            <section class="sample-view">
276                <div class="flex-container" style="width: 200px;">
277                    <div class="flex-item" style="flex-shrink: 0;">Item 1</div>
278                    <div class="flex-item" style="flex-shrink: 1;">Item 2</div>
279                    <div class="flex-item" style="flex-shrink: 1;">Item 3</div>
280                </div>
281            </section>
282          </section>
283        </article>
284        <article>
285          <h3>flex-basis</h3>
286          <section>
287            <header><h4>CSS</h4></header>
288<pre class="sample">
289.item1 {
290  flex-basis: 100px;
291}
292.item2 {
293  flex-basis: 200px;
294}
295.item3 {
296  flex-basis: 25%;
297}</pre>
298            <header><h4>HTML+CSS</h4></header>
299            <section class="sample-view">
300                <div class="flex-container">
301                    <div class="flex-item" style="flex-basis: 100px;">Item 1</div>
302                    <div class="flex-item" style="flex-basis: 200px;">Item 2</div>
303                    <div class="flex-item" style="flex-basis: 25%;">Item 3</div>
304                </div>
305            </section>
306          </section>
307        </article>
308        <article>
309          <h3>align-self</h3>
310          <section>
311            <header><h4>CSS</h4></header>
312<pre class="sample">
313.item1 {
314  align-self: flex-start;
315}
316.item2 {
317  align-self: center;
318}
319.item3 {
320  align-self: flex-end;
321}</pre>
322            <header><h4>HTML+CSS</h4></header>
323            <section class="sample-view">
324                <div class="flex-container" style="height: 150px;">
325                    <div class="flex-item" style="align-self: flex-start;">Item 1</div>
326                    <div class="flex-item" style="align-self: center;">Item 2</div>
327                    <div class="flex-item" style="align-self: flex-end;">Item 3</div>
328                </div>
329            </section>
330          </section>
331        </article>
332        <article>
333          <h3>order</h3>
334          <section>
335            <header><h4>CSS</h4></header>
336<pre class="sample">
337.item1 {
338  order: 3;
339}
340
341.item2 {
342  order: 1;
343}
344
345.item3 {
346  order: 2;
347}</pre>
348            <header><h4>HTML+CSS</h4></header>
349            <section class="sample-view">
350                <div class="flex-container">
351                    <div class="flex-item" style="order: 3;">Item 1</div>
352                    <div class="flex-item" style="order: 1;">Item 2</div>
353                    <div class="flex-item" style="order: 2;">Item 3</div>
354                </div>
355            </section>
356          </section>
357        </article>
358        <article>
359            <h3>inline-flex</h3>
360            <section>
361                <header><h4>display: inline-flex</h4></header>
362                <section class="sample-view">
363                  Here is an example of inline-flex:
364                  <div class="inline-container">
365                      <div class="inline-item">1</div>
366                      <div class="inline-item">2</div>
367                      <div class="inline-item">3</div>
368                  </div>
369                  This text is in the same line as the inline-flex container.
370                </section>
371            </section>
372        </article>
373    </main>
374</body>
375</html>

फ्लेक्सबॉक्स और इनलाइन फ्लेक्सबॉक्स

`flex`

 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    align-items: center;
 5    height: 100px;
 6}
 7
 8.flex-item {
 9    background-color: lightskyblue;
10    padding: 10px;
11    margin: 5px;
12    width: 70px;
13    height: auto;
14}

flex एक प्रॉपर्टी है जिसका उपयोग CSS में तत्वों को प्रभावी ढंग से व्यवस्थित और संरेखित करने के लिए किया जाता है, और यह फ्लेक्सबॉक्स लेआउट सिस्टम का हिस्सा है। यह प्रणाली मुख्यतः कंटेनर के भीतर चाइल्ड तत्वों (फ्लेक्स आइटम्स) को आसानी से संरेखित और वितरित करने के लिए है और पारंपरिक float या position की तुलना में अधिक लचीली है।

flex-box क्लास display प्रॉपर्टी को flex के रूप में निर्दिष्ट करता है ताकि फ्लेक्स लेआउट लागू किया जा सके।
justify-content प्रॉपर्टी के साथ space-between वस्तुओं को बायीं और दायीं छोर पर रखता है और उनके बीच स्थान समान रूप से वितरित करता है।
align-items प्रॉपर्टी को center पर सेट करने से वस्तुएं लंबवत रूप से केंद्रित हो जाती हैं।

फ्लेक्सबॉक्स की मूल संरचना

 1<div class="flex-container">
 2  <div class="flex-item">Item 1</div>
 3  <div class="flex-item">Item 2</div>
 4  <div class="flex-item">Item 3</div>
 5</div>
 6
 7<style>
 8.flex-container {
 9  display: flex;
10  /* Other flex properties */
11  flex-direction: row | row-reverse | column | column-reverse;
12  justify-content: flex-start | flex-end | center | space-between | space-around;
13  align-items: stretch | flex-start | flex-end | center | baseline;
14  flex-wrap: nowrap | wrap | wrap-reverse;
15}
16.flex-item {
17  /* Styles applied to individual items */
18  flex-grow: 0 | 1 | 2 | ...;
19  flex-shrink: 0 | 1;
20  flex-basis: auto | 10px | 25% | ...;
21  align-self: stretch | flex-start | flex-end | center | baseline;
22  order: 0 | 1 | 2 | ... | -1 | -2 | ...;
23}
24</style>

फ्लेक्सबॉक्स के दो मुख्य घटक हैं: फ्लेक्स कंटेनर और फ्लेक्स आइटम।

फ्लेक्स कंटेनर वह पैरेंट तत्व होता है जो चाइल्ड तत्वों को घेरता है, जिसे display: flex का उपयोग करके निर्दिष्ट किया जाता है।
फ्लेक्स आइटम वे तत्व होते हैं जो फ्लेक्स कंटेनर के अंदर स्थित होते हैं, अर्थात कंटेनर के सीधे चाइल्ड।

फ्लेक्स कंटेनर प्रॉपर्टीज़

निम्नलिखित प्रॉपर्टीज़ फ्लेक्स कंटेनर से संबंधित हैं।

display प्रॉपर्टी में flex निर्दिष्ट करें ताकि फ्लेक्स कंटेनर को परिभाषित किया जा सके। आंतरिक चाइल्ड तत्व फ्लेक्स आइटम्स बन जाते हैं।
flex-direction प्रॉपर्टी उस दिशा को निर्दिष्ट करता है जिसमें फ्लेक्स आइटम्स को रखा जाता है। निम्नलिखित मान निर्दिष्ट किए जा सकते हैं:।
- row: तत्वों को क्षैतिज रूप से बाएं से दाएं संगठित करता है। यह डिफ़ॉल्ट मान है।
- row-reverse: क्षैतिज रूप से दाएँ से बाएँ संरेखित करता है।
- column: ऊर्ध्वाधर रूप से ऊपर से नीचे तक संरेखित करता है।
- column-reverse: ऊर्ध्वाधर रूप से नीचे से ऊपर तक संरेखित करता है।
justify-content गुण निर्दिष्ट करता है कि फ्लेक्स आइटम क्षैतिज रूप से (मुख्य अक्ष के साथ) कैसे संरेखित होते हैं।
- flex-start: आरंभ में संरेखित (बाएँ)।
- flex-end: अंत में संरेखित (दाएँ)।
- center: केंद्र में संरेखित।
- space-between: आइटम के बीच समान अंतराल वितरित करता है।
- space-around: आइटम के चारों ओर समान अंतराल वितरित करता है।
align-items गुण निर्दिष्ट करता है कि आइटम ऊर्ध्वाधर रूप से (क्रॉस अक्ष के साथ) कैसे संरेखित होते हैं।
- flex-start: शीर्ष पर संरेखित।
- center: ऊर्ध्वाधर रूप से केंद्रित।
- flex-end: नीचे पर संरेखित।
- stretch: कंटेनर की ऊंचाई भरने के लिए खिंचाव करता है।
- baseline: पाठ के आधार रेखा के साथ संरेखित।
flex-wrap गुण निर्दिष्ट करता है कि यदि आइटम कंटेनर की चौड़ाई से अधिक होते हैं तो क्या उन्हें मोड़ा जाना चाहिए।
- nowrap: कोई मोड़ नहीं। यह डिफ़ॉल्ट मान है।
- wrap: आइटम को मोड़ता है।
- wrap-reverse: उल्टे क्रम में आइटम को मोड़ता है।

फ्लेक्स आइटम के गुण

निम्नलिखित गुण फ्लेक्स आइटम से संबंधित हैं।

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

फ्लेक्सबॉक्स के लाभ।

फ्लेक्सबॉक्स के लाभों में निम्नलिखित बिंदु शामिल हैं:।

लचीला लेआउट: आप तत्वों के संरेखण, रिक्ति और दिशा को लचीले ढंग से नियंत्रित कर सकते हैं।
रिस्पॉन्सिव डिजाइन के लिए आदर्श: चाइल्ड तत्व अपने पैरेंट तत्व के आकार के अनुसार स्वतः समायोजित हो जाते हैं।

`इनलाइन-फ्लेक्स`

 1.inline-container {
 2    display: inline-flex;
 3    border: 2px solid #000;
 4    padding: 10px;
 5    justify-content: space-between;
 6    background-color: lightblue;
 7    width: 150px;
 8    height: 50px;
 9}
10.inline-item {
11    background-color: lightskyblue;
12    padding: 10px;
13    margin: 5px;
14    width: 20px;
15    height: auto;
16}

इनलाइन-फ्लेक्स सीएसएस में एक लेआउट शैली है जो आपको फ्लेक्सबॉक्स का उपयोग करके सामग्री को लेआउट करने की अनुमति देती है, जबकि तत्व को इनलाइन फ्लो के साथ संरेखित किया जाता है। यह डिस्प्ले: फ्लेक्स की तरह ही व्यवहार करता है, लेकिन इनलाइन-फ्लेक्स तत्व को इनलाइन तत्व के रूप में कार्य करने की अनुमति देता है।
इस उदाहरण में, इनलाइन-फ्लेक्स को कंटेनर क्लास पर लागू किया गया है। इस प्रकार, कंटेनर क्लास पैरेंट <div> तत्व के भीतर एक इनलाइन-स्तरीय तत्व के रूप में कार्य करता है। साथ ही, कंटेनर क्लास के अंदर मौजूद आइटम क्लास के तत्व, फ्लेक्सबॉक्स के नियमों के अनुसार व्यवस्थित किए जाते हैं। इस उदाहरण में, जस्टिफाई-कॉन्टेंट: स्पेस-बिटवीन का उपयोग किया गया है, इसलिए चाइल्ड तत्वों के बीच स्थान समान रूप से वितरित किया गया है।

`इनलाइन-फ्लेक्स` के उपयोग के मामले।

इनलाइन-फ्लेक्स विशेष रूप से निम्नलिखित मामलों में उपयोगी है:।

जब आप इनलाइन तत्वों के साथ एक फ्लेक्स लेआउट का उपयोग करना चाहते हैं यह उपयोगी है जब आपको छोटे UI घटकों जैसे बटन या आइकन में पोजिशनिंग के लिए फ्लेक्सबॉक्स का उपयोग करना हो। उदाहरण के लिए, जब आप एक आइकन और टेक्स्ट को साथ-साथ और केंद्र में संरेखित करना चाहते हैं।
जब आप जटिल लेआउट को बनाते समय इनलाइन प्रवाह बनाए रखना चाहते हैं इसका उपयोग तब किया जाता है जब आप फ्लेक्सबॉक्स की शक्ति का उपयोग करना चाहते हैं ताकि आंतरिक लेआउट लचीला हो और वह एक इनलाइन तत्व के रूप में कार्य करे। उदाहरण के लिए, जब आप एक ही पंक्ति में कई तत्वों को पंक्तिबद्ध करना चाहते हैं और उनके अंदर बाल तत्वों को समायोजित करना चाहते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

लेआउट-संबंधित CSS गुण

फ्लेक्सबॉक्स-संबंधित CSS प्रॉपर्टीज़

YouTube Video

प्रीव्यू के लिए HTML

फ्लेक्सबॉक्स और इनलाइन फ्लेक्सबॉक्स

flex

फ्लेक्सबॉक्स की मूल संरचना

फ्लेक्स कंटेनर प्रॉपर्टीज़

फ्लेक्स आइटम के गुण

फ्लेक्सबॉक्स के लाभ।

इनलाइन-फ्लेक्स

इनलाइन-फ्लेक्स के उपयोग के मामले।

YouTube Video

`flex`

`इनलाइन-फ्लेक्स`

`इनलाइन-फ्लेक्स` के उपयोग के मामले।