مقدمه

ویژگی flex-wrap یکی از قابلیت‌های مهم Flexbox است که به شما کمک می‌کند عناصر فرزند در اندازه‌های مختلف صفحه به‌صورت واکنش‌گرا (Responsive) نمایش داده شوند.

با استفاده از flex-wrap دیگر نیازی نیست برای هر اندازه صفحه، مدام Media Query بنویسید یا نگران سرریز شدن (Overflow) عناصر باشید. Flexbox به‌صورت خودکار نحوه قرارگیری آیتم‌ها را مدیریت می‌کند.

Flexbox و مدیریت شکستن عناصر

ویژگی flex-wrap بخشی از ماژول Flexbox در CSS است.

Flexbox مدلی برای چیدمان عناصر است که نحوه نمایش عناصر فرزند را درون یک عنصر والد کنترل می‌کند.

برای تبدیل یک عنصر به Flex Container کافی است:

.parent {
  display: flex;
}

پس از آن می‌توانید flex-wrap را روی همان عنصر والد اعمال کنید:

.parent {
  display: flex;
  flex-wrap: wrap;
}

نکته مهم:

✅ flex-wrap فقط روی عنصر والد اعمال می‌شود.

❌ روی عناصر فرزند اعمال نمی‌شود.

رفتار پیش‌فرض flex-wrap

به‌صورت پیش‌فرض مقدار flex-wrap برابر است با:

flex-wrap: nowrap;

یعنی همه عناصر فرزند تلاش می‌کنند در یک خط باقی بمانند.

فرض کنید ابتدا یک کانتینر معمولی داریم:

gator
cayman
crocodile
eggs

هر عنصر در یک خط جدا نمایش داده می‌شود.

اما اگر والد را Flex کنیم:

.flex-container {
  display: flex;
}

خروجی:

gator cayman crocodile eggs

همه عناصر در یک خط قرار می‌گیرند.

مشکل nowrap

وقتی عرض صفحه کوچک شود:

• عناصر همچنان در یک خط باقی می‌مانند.
• فشرده‌تر می‌شوند.
• در نهایت از کانتینر بیرون می‌زنند.

مثال:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

در این حالت هیچ شکستی رخ نمی‌دهد.

مقادیر flex-wrap

این ویژگی سه مقدار اصلی دارد:

nowrap
wrap
wrap-reverse

1. nowrap

مقدار پیش‌فرض.

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

ویژگی‌ها:

• همه آیتم‌ها در یک خط باقی می‌مانند.
• امکان شکستن به خطوط بعدی وجود ندارد.
• احتمال Overflow زیاد است.

2. wrap

پرکاربردترین مقدار.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

ویژگی‌ها:

• اگر فضای کافی نباشد عناصر به خط بعدی منتقل می‌شوند.
• آیتم‌های اضافی به پایین کانتینر می‌روند.

مثال:

gator   cayman

crocodile   eggs

این حالت برای طراحی‌های Responsive بسیار مناسب است.

3. wrap-reverse

رفتاری برعکس wrap دارد.

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

در این حالت:

• عناصر اضافی به خط بالاتر منتقل می‌شوند.
• ترتیب خطوط معکوس می‌شود.

مثال:

crocodile   eggs

gator   cayman

این مقدار کمتر استفاده می‌شود اما در برخی طراحی‌های خاص کاربرد دارد.

نمونه کاربردی

.products {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

<div class="products">
  <div>محصول 1</div>
  <div>محصول 2</div>
  <div>محصول 3</div>
  <div>محصول 4</div>
</div>

با کوچک شدن صفحه:

• کارت‌ها به خط بعد منتقل می‌شوند.
• هیچ اسکرول افقی ایجاد نمی‌شود.

ویژگی flex-flow

CSS یک ویژگی خلاصه‌نویسی برای:

flex-direction
flex-wrap

دارد که نام آن:

flex-flow

است.

آشنایی سریع با flex-direction

این ویژگی جهت چیدمان عناصر را تعیین می‌کند.

مقادیر:

row
column
row-reverse
column-reverse

مقدار پیش‌فرض:

row

استفاده از flex-flow

به‌جای نوشتن:

.container {
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}

می‌توان نوشت:

.container {
  flex-flow: row-reverse wrap-reverse;
}

فرمت کلی:

flex-flow: flex-direction flex-wrap;

مثال

.backwards-container {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
}

نتیجه:

• ترتیب آیتم‌ها برعکس می‌شود.
• خطوط جدید در بالا ایجاد می‌شوند.

پشتیبانی مرورگرها

Flexbox تقریباً در تمام مرورگرهای مدرن پشتیبانی می‌شود.

حتی:

• Internet Explorer 10
• Internet Explorer 11

نیز تا حد زیادی از آن پشتیبانی می‌کنند.

استفاده از Prefixها

برای مرورگرهای بسیار قدیمی:

.parent {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;

  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}

امروزه معمولاً نیازی به این Prefixها نیست، مگر اینکه از مرورگرهای قدیمی پشتیبانی کنید.

مزایای flex-wrap

✅ جلوگیری از سرریز شدن عناصر

✅ ساخت Layoutهای واکنش‌گرا

✅ کاهش نیاز به Media Query

✅ مدیریت خودکار خطوط

✅ سازگاری عالی با Flexbox

✅ مناسب برای گالری‌ها، کارت‌ها و منوها

جمع‌بندی

ویژگی flex-wrap یکی از ساده‌ترین و کاربردی‌ترین ابزارهای Flexbox برای ساخت صفحات واکنش‌گرا است. مقدار wrap به عناصر اجازه می‌دهد هنگام کمبود فضا به خطوط بعدی منتقل شوند و از ایجاد اسکرول افقی یا فشرده شدن بیش از حد محتوا جلوگیری می‌کند. همچنین با استفاده از ویژگی flex-flow می‌توان flex-direction و flex-wrap را به‌صورت خلاصه در یک خط تعریف کرد.

از همراهی شما با پارمین کلود متشکریم.