ফ্লেক্সবক্স সম্পর্কিত সিএসএস প্রপার্টিজ

Articles

এই প্রবন্ধটি ফ্লেক্সবক্স সম্পর্কিত সিএসএস প্রপার্টিজ ব্যাখ্যা করে।

আপনি ফ্লেক্সবক্স এবং ইনলাইন ফ্লেক্সবক্স কীভাবে ব্যবহার করবেন তা শিখতে পারেন।

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 হল একটি প্রপার্টি যা সিএসএস-এ কার্যকরভাবে এলিমেন্টগুলিকে সজ্জিত এবং বিন্যস্ত করতে ব্যবহৃত হয় এবং এটি ফ্লেক্সবক্স লেআউট সিস্টেমের একটি অংশ। এই সিস্টেমটি মূলত একটি কন্টেইনারের ভিতরে শিশু উপাদানগুলি (ফ্লেক্স আইটেম) সহজেই বিন্যাস এবং বিতরণ করার জন্য ব্যবহৃত হয় এবং এটি ঐতিহ্যগত 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, তবে একটি পজিটিভ সংখ্যা উল্লেখ করলে এটি পরে সরবে, আর একটি নেগেটিভ সংখ্যা উল্লেখ করলে এটি আগে সরবে।

ফ্লেক্সবক্স এর সুবিধাগুলি

ফ্লেক্সবক্সের সুবিধাগুলির মধ্যে নিম্নলিখিত বিষয়গুলি অন্তর্ভুক্ত রয়েছেঃ।

নমনীয় লেআউট: আপনি উপাদানগুলির অ্যালাইনমেন্ট, ফাঁক এবং দিকনির্দেশ নমনীয়ভাবে নিয়ন্ত্রণ করতে পারেন।
প্রতিক্রিয়াশীল ডিজাইনের জন্য আদর্শ: শিশু উপাদানগুলি অভিভাবক উপাদানের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে সামঞ্জস্য হয়।

`inline-flex`

 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}

inline-flex হল CSS-এ একটি লেআউট স্টাইল যা আপনাকে ফ্লেক্সবক্স ব্যবহার করে উপাদানটির সামগ্রী লেআউট করার পাশাপাশি তাকে ইনলাইন প্রবাহ বরাবর অ্যালাইন করতে দেয়। এটি display: flex এর মতো আচরণ করে, তবে inline-flex উপাদানটিকে ইনলাইন উপাদান হিসাবে আচরণ করতে বাধ্য করে।
এই উদাহরণে, inline-flex প্রোপার্টি container ক্লাসে প্রয়োগ করা হয়েছে। ফলে, প্যারেন্ট <div> উপাদানের মধ্যে container ক্লাসটি একটি ইনলাইন-লেভেল উপাদান হিসাবে আচরণ করে। একই সময়ে, container ক্লাসের মধ্যে অবস্থিত item ক্লাসের উপাদানগুলি ফ্লেক্সবক্সের নিয়ম অনুযায়ী সাজানো হয়। এই উদাহরণে, justify-content: space-between ব্যবহার করা হয়েছে, তাই শিশু উপাদানগুলির মধ্যে সমানভাবে ফাঁক বিতরণ করা হয়।

`inline-flex` এর ব্যবহারের ক্ষেত্রগুলি

inline-flex বিশেষ করে নিম্নলিখিত ক্ষেত্রগুলিতে কার্যকরঃ।

যখন আপনি ইনলাইন উপাদানগুলির সাথে একটি ফ্লেক্স লেআউট ব্যবহার করতে চান এটি তখন কার্যকরী যখন আপনাকে বোতাম বা আইকনের মতো ছোট UI উপাদানগুলির অবস্থান নির্ধারণের জন্য ফ্লেক্সবক্স ব্যবহার করতে হয়। উদাহরণস্বরূপ, যখন আপনি একটি আইকন এবং টেক্সট পাশাপাশি সাজাতে এবং তাদের কেন্দ্র করতে চান।
ইনলাইন ফ্লো বজায় রেখে জটিল লেআউট নির্মাণের সময় এটি তখন ব্যবহৃত হয় যখন আপনি ফ্লেক্সবক্সের শক্তি কাজে লাগিয়ে অভ্যন্তরীণ লেআউট নমনীয় করতে চান এবং এটি ইনলাইন উপাদান হিসাবে কাজ করে। উদাহরণস্বরূপ, যখন আপনি একই সারিতে একাধিক উপাদান সাজাতে এবং তাদের মধ্যে থাকা চাইল্ড উপাদানগুলো সামঞ্জস্য করতে চান।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

লেআউট-সম্পর্কিত CSS প্রোপার্টিস

ফ্লেক্সবক্স সম্পর্কিত সিএসএস প্রপার্টিজ

YouTube Video

প্রিভিউর জন্য HTML

ফ্লেক্সবক্স এবং ইনলাইন ফ্লেক্সবক্স

flex

ফ্লেক্সবক্সের মৌলিক কাঠামো

ফ্লেক্স কন্টেইনার প্রপার্টিজ

ফ্লেক্স আইটেমগুলির প্রপার্টি

ফ্লেক্সবক্স এর সুবিধাগুলি

inline-flex

inline-flex এর ব্যবহারের ক্ষেত্রগুলি

YouTube Video

`flex`

`inline-flex`

`inline-flex` এর ব্যবহারের ক্ষেত্রগুলি