آموزش Flex Container در Flex Box

آموزش Flex Container در FlexBox

آموزش Flex Container در Flex Box

جهت استفاده از الگوی Flex Box در صفحه وب خود، بایستی یک دربرگیرنده flex Container را با استفاده از خاصیت display به صورت زیر تعریف کنید :

syntax
کد	display: flex \| inline-flex

خاصیت display می تواند یکی از مقادیر زیر را دریافت کند :

flex : با مقدار flex یک دربرگیرنده (Container) که تمامی عرض صفحه را شامل خواهد شد (به صورت بلوک یا (Block) ایجاد می شود.
inline-flex : با استفاده از این مقدار، یک دربرگیرنده (Container) درون خطی (inline) که به اندازه عرض عنصر دربرگیرنده آن خواهد بود، ایجاد می شود.

حال با استفاده از چند مثال عملی، نحوه استفاده از خاصیت display را نمایش خواهیم داد.

آموزش استفاده از خاصیت Flex در FlexBox

با اختصاص مقدار Flex برای خاصیت display، یک عنصر دربرگیرنده (Сontainer) که تمام عرض صفحه را به صورت بلوک (Block) اشغال می کند، ایجاد خواهد شد. این عنصر تمامی عرض عنصر دربرگیرنده خود (که معمولا مرورگر است) را شامل می شود.

مثال عملی :

در مثال عملی زیر، نحوه تعیین یک Container تمام عرض (Block) را نشان داده ایم. در اینجا، شش جعبه (Box) با پس زمینه های رنگی متفاوت درون یک Container ایجاد کرده ایم :

syntax

کد

<!doctype html>

<html lang = "en">
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .container {
           display: flex;
       }

       .box {
           font-size: 35px;
           padding: 15px;
       }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

خروجی

نکته :

تا زمانی که از مقدار Flex برای خاصیت display استفاده کرده ایم، عنصر Container تمامی عرض عنصر دربرگیرنده آن یعنی مرورگر را شامل خواهد شد.

می توانید خروجی نکته فوق را با اضافه کردن خطوط حاشیه به عنصر div با class برابر Continer، به صورت زیر، مشاهده کنید :

syntax
کد	.container { display: flex; border:3px solid black; }
خروجی

آموزش استفاده از خاصیت inline-flex در Flex Box

با تعیین مقدار inline-flex برای خاصیت display، یک عنصر دربرگیرنده (Container) به صورت درون خطی (inline) ایجاد می شود که فقط به میزان لازم و به اندازه عناصر درونش (و نه تمام عرض صفحه) را اشغال می کند.

مثال عملی :

در مثال عملی زیر، نحوه ایجاد یک عنصر دربرگیرنده (Container) را با استفاده از خاصیت display و مقدار inline-flex، نشان داده ایم.
در این مثال ها 6 جعبه (Box) در عنصر div با کلاس Container ایجاد کرده ایم :

syntax

کد

<!doctype html>

<html lang = "en">
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .container {
           display: inline-flex;
           border: 3px solid black;
       }

       .box {
           font-size: 35px;
           padding: 15px;
       }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

خروجی

آموزش استفاده از خاصیت inline-flex در Flex Box