قبل از معرفی مدل Flexbox layout، اکثر طراحان و توسعهدهندگان از تکنیک‌های مختلفی برای ایجاد layoutهای ریسپانسیو و انعطاف‌پذیر استفاده می‌کردند. این تکنیک‌ها شامل floats، tables و positioning می‌باشد. در حالی که استفاده از این تکنیک‌ها هنوز هم امکان‌پذیر است، اما اکثر طراحان به استفاده از مدل Flexbox روی آورده‌اند. یکی از مهم‌ترین ویژگی‌های Flexbox ویژگی flex-wrap است که به توسعهدهندگان اجازه می‌دهد تا رفتار wrapping مربوط به flex itemها را زمانی که از اندازه flex container خود فراتر می‌روند، کنترل کنند.
در این مقاله قصد داریم تا ویژگی flex-wrap، مقادیر آن و اهمیت آن برای رفتار layout ریسپانسیو را بررسی کنیم.
برای درک کامل flex-wrap، ابتدا باید بدانیم که Flexbox چیست و چگونه کار می‌کند. Flexbox یک مدل layout است که راه کارآمدتری را برای سازماندهی، تراز و توزیع فضا بین آیتم‌ها در یک container ارائه می‌دهد. مدل Flexbox از دو کامپوننت اصلی تشکیل شده است: flex container و flex itemها.
flex container یک المنت parent است که شامل یک یا چند flex item می‌باشد، و context را برای نحوه قرارگیری flex itemها در آن تعیین می‌کند. از طرف دیگر، flex itemها المنت‌های childای هستند که در flex container قرار می‌گیرند. می‌توانیم آن‌ها را با استفاده از ویژگی‌های Flexbox مانند flex-wrap، flex-grow، flex-basisو غیره اندازه کرده، مرتب و در داخل container تراز کنیم.
اکنون که با flex container و flex itemها آشنا شدیم، به بررسی ویژگی flex-wrap می‌پردازیم.
ویژگی flex-wrap برای کنترل رفتار wrapping مربوط به flex itemها در flex container استفاده می‌شود. این ویژگی مشخص می‌کند که آیا flex itemهایی که در یک flex container داریم باید روی چندین خط متعدد wrap شوند یا خیر.
به بیان ساده، تصور کنید جعبه‌ای داریم که می‌توانیم تعداد معینی اسباب بازی را در آن جای دهیم. وقتی تعداد اسباب‌بازی‌هایی که داریم زیادی باشد، می‌توانیم تا زمانی که همه آن‌ها در جعبه جا شوند به فشرده کردن ادامه دهیم، یا این که می‌توانیم یک جعبه جدید تهیه کرده و تعدادی از اسباب‌بازی‌ها را در آن قرار دهیم.
این دقیقاً همان کاری است که flex-wrap انجام می‌دهد. وقتی از ویژگی flex-wrap در CSS استفاده می‌کنیم، مانند این است که به آیتم‌ها می‌گوییم یا در یک خط بمانند (مانند فشرده کردن اسباب بازی‌ها) یا وقتی فضای کافی وجود ندارد روی یک خط جدید wrap شوند (مثل قرار دادن اسباب‌بازی‌ها در یک جعبه جدید).
ویژگی flex-wrap می‌تواند سه مقدار داشته باشد:
nowrap: این مقدار پیش‌فرض flex-wrap است و نشان می‌دهد که flex itemها نباید wrap شوند و باید در یک خط باقی بمانند. در ادامه نحوه اعمال این مورد برای یک کامپوننت را داریم:
.example {
display: flex;
flex-wrap: nowrap;
}
wrap: این مقدار flex-wrap به flex itemها اجازه می‌دهد تا در صورت لزوم روی خطوط متعدد قرار بگیرند:
.example {
display: flex;
flex-wrap: wrap;
}
wrap-reverse: این مقدار flex-wrap به flex itemها اجازه می‌دهد تا به ترتیب معکوس روی خطوط متعدد wrap شوند:
.example {
display: flex;
flex-wrap: wrap-reverse;
}
برای درک درست این مقادیر، بیایید با استفاده از یک مدل جعبه ساده مثالی بزنیم. برای ایجاد آن ابتدا کد HTML را می‌نویسیم:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="container nowrap">
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
<ul class="container wrap">
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
<ul class="container wrap-reverse">
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
</body>
</html>
در مرحله بعد، تگ‌های <ul> و <li> را استایل‌دهی می‌کنیم و به سه بخش مقادیر مختلف flex-wrap می‌دهیم:
.container {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
display: flex;
justify-content: center;
background: green;
}
.nowrap {
display: flex;
flex-wrap: nowrap;
}
.nowrap li {
background: black;
}
.wrap {
flex-wrap: wrap;
}
.wrap li {
background: purple;
}
.wrap-reverse {
flex-wrap: wrap-reverse;
}
.wrap-reverse li {
background: pink;
}
.flex-item {
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
اکنون که به سه بخش مقادیر مختلف flex-wrap داده‌ایم، در این لینک می‌توانید خروجی را به صورت بصری مشاهده نمایید.
در حالت عادی شاهد اتفاق خاصی نیستیم، اما اگر اندازه صفحه نمایش را فشرده‌تر کنیم متوجه تفاوت می‌شویم. مقدار ویژگی flex-wrap در ردیف اول روی nowrapتنظیم شده است، به این ترتیب با کاهش اندازه صفحه محتوای آن به یک خط جدید منتقل نمی‌شود. همینطور مهم نیست که اندازه صفحه چقدر کوچک می‌شود، زیرا این ردیف در هر فضایی که در دسترس دارد خود را فشرده‌تر می‌کند.
ویژگی flex-wrap در دو ردیف دیگر به ترتیب بر روی wrapو wrap-reverseتنظیم شده است، بنابراین با کاهش اندازه صفحه، کادرهای این ردیف‌ها به کاهش، واکنش نشان می‌دهند و به یک خط جدید منتقل می‌شوند. ردیف دوم یک خط جدید را مستقیماً زیر آن ایجاد می‌کند، در حالی که ردیف آخر دقیقا برعکس عمل می‌کند و یک خط جدید در بالای خود ایجاد می‌نماید.
Flex-wrap نقش مهمی در ایجاد layoutهای ریسپانسیو در CSS بازی می‌کند، زیرا wrapping انعطاف‌پذیر و خلاقانه کامپوننت‌ها را در یک flex container امکان‌پذیر می‌سازد. توسعهدهندگان می‌توانند با کنترل نحوه wrapping مربوط به flex itemها، layoutهایی ایجاد کنند که با اندازه‌های مختلف صفحه نمایش و انواع دستگاه‌ها سازگاری داشته باشند و آن‌ها را ریسپانسیوتر کند.
در اینجا چند روش وجود دارد که با استفاده از آن‌ها Flex-wrap به ریسپانسیو شدن در CSS کمک می‌کند:
flex-wrap به flex itemها این امکان را می‌دهد تا روی خطوط متعدد قرار گیرند و این موضوع به ما کمک می‌کند تا به راحتی layoutهایی را ایجاد کنیم که با اندازه‌های مختلف صفحه نمایش تنظیم می‌شوند. در صفحه نمایش‌های کوچک‌تر، flex itemها می‌توانند روی چندین خط قرار بگیرند و یک layout انباشته ایجاد نمایند. این امر باعث می‌شود تا بدون از دست دادن تجربه کاربر، نمایش محتوا در صفحه‌های کوچک‌تر آسان‌تر شود.
flex-wrap این امکان را به ما می‌دهد تا فضا را به درستی در یک container توزیع کنیم و به این ترتیب ایجاد layoutهای ریسپانسیو را آسان‌تر می‌کند. برای مثال، در صفحه‌های بزرگ‌تر، می‌توانیم flex itemها را در شرایطی که یک فاصله برابر بین آن‌ها وجود دارد در کنار هم قرار دهیم. وقتی که اندازه صفحه کاهش می‌یابد، flex itemها می‌توانند روی چندین خط قرار بگیرند و فضای باقی‌مانده به طور مساوی بین آن‌ها توزیع شود.
می‌توانیم با استفاده از ویژگی flex-wrap، خوانایی محتویات را در صفحه‌های کوچک‌تر با قرار دادن کامپوننت‌ها در چندین خط بهبود ببخشیم. در نتیجه می‌توانیم از فشرده شدن بیش از حد مطالب جلوگیری کنیم. این امر به ویژه برای وب سایت‌هایی که محتوای متنی زیادی دارند، مانند وبلاگ‌ها و سایت‌های خبری، مهم است.
ویژگی flex-wrap همچنین فرآیند ایجاد layoutهای ریسپانسیو را ساده می‌کند. با استفاده از یک ویژگی واحد، می‌توانیم نحوه wrap شدن کامپوننت‌ها را کنترل کنیم و به این ترتیب ایجاد layoutهای انعطاف‌پذیر و پاسخگو که با اندازه‌های مختلف صفحه‌نمایش و انواع دستگاه‌ها سازگار است، آسان‌تر می‌شود.
ویژگی flex-wrap یک ابزار ارزشمند در طراحی layoutهای flexbox و توسعه کلی وب است. این ویژگی ما را قادر می‌سازد تا رفتار wrapping مربوط به flex itemها را در یک flex container کنترل کنیم و طرح‌های انعطاف‌پذیر و ریسپانسیو ایجاد کنیم که با اندازه‌های مختلف صفحه نمایش و انواع دستگاه‌ها سازگار است.
همینطور می‌توانیم ویژگی flex-wrap را با سایر ویژگی‌های flexbox مانند flex-direction، justify-contentو align-itemsترکیب کنیم تا به layoutهای پیشرفته‌تری دست پیدا کنیم.
دیدگاه‌ها: