آموزش مرتب سازی متن و عناصر (wrap) در FlexBox

در حالت معمول، زمانی که فضای کافی در عنصر دربرگیرنده اجزاء (container) وجود ندارد، بقیه آیتم های Flex که در عرض جا نشده اند، همانند تصویر زیر، از دید کاربر مخفی شده و برای دسترسی به آن ها با یستی در مرورگر، پیمایش افقی انجام دهید :

خاصیت flex-wrap در FlexBox ، برای تعیین اینکه عنصر دربرگیرنده اجزاء (Flex container) بایستی اجزاء را به صورت تک خطی (single-line) یا چند خطی (multi-line) نمایش دهد، استفاده می شود .
ساختار کلی استفاده از خاصیت flex-wrap به صورت زیر است :

syntax
کد	flex-wrap: nowrap \| wrap \| wrap-reverse flex-direction: column \| column-reverse

خاصیت flex-wrap می تواند یکی از 3 مقادیر زیر را دریافت کند :

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

در ادامه، با ارائه مثال های عملی، نحوه استفاده از خاصیت flex-wrap را در FlexBox نمایش می دهیم.

آموزش استفاده از مقدار wrap در flexbox wrap

در صورت تعیین مقدار wrap برای flex-wrap، المنت های موجود در عنصر دربرگیرنده (container)، به صورت افقی و از چپ به راست (در صورت لزوم در خط یا خط های بعدی)، همانند تصویر زیر، قرار خواهند گرفت :

مثال عملی :

در کد مثال عملی زیر، شش جعبه (Box) را در یک عنصر دربرگیرنده (تگ div با کلاس container) ایجاد کرده ایم.
سپس مقدار خاصیت flex-wrap را برای عنصر container بر روی مقدار wrap تنظیم نموده ایم. مشاهده می کنید که در صورت عدم وجود فضای عنصر کافی برای نمایش جعبه ها، جعبه های اضافی در خط بعدی نمایش داده می شوند :

syntax

کد

<!doctype html>

<html>
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .box {
           font-size: 35px;
           padding: 15px;
           width: 100px;
       }

       .container {
           display: flex;
           border: 3px solid black;
           flex-direction: row;
           flex-wrap: wrap;
       }
   </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>

خروجی

آموزش استفاده از مقدار wrap-reverse در flexbox wrap

در صورت تعیین مقدار wrap-reverser برای خاصیت flex-wrap، المنت های موجود در عنصر دربرگیرنده (container)، به صورت افقی و از راست به چپ، همانند تصویر زیر، قرار خواهند گرفت :

مثال عملی :

در کد مثال عملی زیر، شش جعبه (Box) را در یک عنصر دربرگیرنده (تگ div با کلاس container) ایجاد کرده ایم.
سپس مقدار خاصیت flex-wrap برای عنصر container را بر روی مقدار wrap-reverse تنظیم نموده ایم. همانطور که در خروجی مشاهده می کنید، جعبه ها به صورت افقی و از راست به چپ قرار گرفته اند :

syntax

کد

<!doctype html>

<html>
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .box {
           font-size: 35px;
           padding: 15px;
           width: 100px;
       }

       .container {
           display: flex;
           border: 3px solid black;
           flex-direction: row;
           flex-wrap: wrap-reverse;
       }
   </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>

خروجی

آموزش استفاده از مقدار wrap و column در flex-wrap

در صورتی که مقدار wrap را برای خاصیت flex-wrap و مقدار column را برای خاصیت flex-direction تعیین نمایید، عناصر موجود در عنصر دربرگیرنده (container) به صورت عمودی و از بالا به پایین (و راست به چپ)، همانند تصویر زیر مرتب خواهند شد :

مثال عملی :

برای مثال، در کد عملی زیر، شش جعبه (Box) را در یک عنصر div با کلاس container ایجاد کرده ایم.
سپس با تعیین مقدار wrap برای خاصیت flex-wrap و مقدار column برای خاصیت flex-drection، عناصر موجود در تگ div را به صورت عمودی و از بالا به پایین مرتب کرده ایم :

syntax

کد

<!doctype html>

<html>
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .box {
           font-size: 35px;
           padding: 15px;
           width: 100px;
       }

       .container {
           display: flex;
           border: 3px solid black;
           flex-direction: column;
           flex-wrap: wrap;
           height: 100vh;
       }
   </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>

خروجی

آموزش استفاده از مقدار wrap-reverse و column در flex-wrap

درصورتی که مقدار wrap-reverse را برای مقدار flex-wrap و مقدار column را برای خاصیت flex-direction تعیین نمایید، عناصر موجود در عنصر دربرگیرنده (container)، به صورت عمودی و از چپ به راست، همانند تصویر زیر، مرتب خواهند شد :

مثال عملی :

در کد مثال عملی زیر، مقدار wrap-reverse را برای خاصیت flex-wrap و مقدار column را برای خاصیت flex-direction عنصر دربرگیرنده آن که تگ div با کلاس container است ، تعیین کرده ایم.
درون این div، شش جعبه (Box) دیگر تعریف شده که تعیین خواص فوق، باعث مرتب شدن آن ها به صورت عمودی و از چپ به راست درون container شده است :

syntax

کد

<!doctype html>

<html>
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .box {
           font-size: 35px;
           padding: 15px;
           width: 100px;
       }

       .container {
           display: flex;
           border: 3px solid black;
           flex-direction: column;
           flex-wrap: wrap-reverse;
           height: 100vh;
       }
   </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>

خروجی