ویژگی flex-wrap CSS

تعریف و استفاده

ویژگی flex-wrap تعیین می‌کند که آیا پروژه‌های انعطاف‌پذیر باید به خط کشی‌ها جابجا شوند یا خیر.

نکته:اگر عنصر، پروژه انعطاف‌پذیر نباشد، ویژگی flex غیرمهم است.

لطفاً به:

آموزش CSS: قابلیت انعطاف‌پذیری CSS

دستورالعمل CSS:ویژگی flex

دستورالعمل CSS:ویژگی flex-basis

دستورالعمل CSS:ویژگی flex-direction

دستورالعمل CSS:ویژگی flex-flow

دستورالعمل CSS:ویژگی flex-grow

دستورالعمل CSS:ویژگی flex-shrink

دستورالعمل HTML DOM:ویژگی flexWrap

مثال

اجازه دهید پروژه‌های انعطاف‌پذیر در زمان نیاز به خط کشی‌ها جابجا شوند:

div {
  display: flex;   
  flex-wrap: wrap;
}

آزمایش کنید

قوانین CSS

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

مقدار ویژگی

مقدار توضیح
nowrap مقدار پیش‌فرض. این ویژگی تعیین می‌کند که پروژه‌های انعطاف‌پذیر نباید به خط کشی‌ها جابجا شوند.
wrap این ویژگی تعیین می‌کند که آیا پروژه‌های انعطاف‌پذیر باید در زمان نیاز به خط کشی‌ها جابجا شوند یا خیر.
wrap-reverse این ویژگی تعیین می‌کند که آیا پروژه‌های انعطاف‌پذیر باید در زمان نیاز به خط کشی‌های معکوس جابجا شوند یا خیر.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. ببینید: initial。
inherit این ویژگی را از عنصر پدر خود ارث می‌برد. ببینید: inherit。

جزئیات فنی

مقدار پیش‌فرض: nowrap
وراثت: خیر
انیمیشن‌سازی: پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن。
نسخه: CSS3
قوانین جاوااسکریپت: object.style.flexWrap="nowrap"

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

اعداد شماری در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این ویژگی را کامل پشتیبانی می‌کنند.

اعداد شماری که شامل -webkit- یا -moz- هستند، نشان‌دهنده نسخه اولیه با استفاده از پیشوند هستند.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0