ویژگی flex-flow CSS

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

ویژگی flex-flow یک شorthand از این ویژگی‌ها است:

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

لطفاً به:

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

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

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

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

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

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

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

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

مثال

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

div {
  display: flex;
  flex-flow: row-reverse wrap;
}

آزمایش کنید

جمله برنامه‌نویسی CSS

flex-flow: flex-direction flex-wrap|initial|inherit;

مقدار ویژگی

مقدار توضیح
flex-direction

مقدارهای ممکن:

  • row
  • row-reverse
  • column
  • column-reverse
  • initial
  • inherit

مقدار پیش‌فرض "row" است.

تعیین می‌کند که پروژه‌های انعطاف‌پذیر در چه جهتی قرار دارند.
flex-wrap

مقدارهای ممکن:

  • nowrap
  • wrap
  • wrap-reverse
  • initial
  • inherit

مقدار پیش‌فرض "nowrap" است.

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

جزئیات فنی

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

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

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

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهای پشتیبان از این ویژگی است. از پیشوند اولین نسخه با استفاده از -webkit-، -ms- یا -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