لوگو دویکس
ورود / ثبت نام
flex-flow در CSS

flex-flow در CSS

دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 20 بهمن 1399

با ویژگی flex-flow در CSS آشنا می شویم.

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

خاصیت flex-flow در واقع خلاصه ای برای خواص خمش جهت و انعطاف پذیری است. جهت آیتم های فلکس و اینکه آیا آنها در یک عبارت واحد قرار می گیرند را تنظیم می کند:

p {
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: column wrap-reverse; /* Safari 6.1 and newer */ 
    display: flex;
    flex-flow: column wrap-reverse;
}

توجه: فقط با کالاهای فلکسی که در ظروف فلکس قرار می گیرند می توانید از جریان فلکس استفاده کنید.

بررسی جریان flex-flow در CSS

استفاده از مختصر CSS flex-flow بسیار ساده است ، زیرا می توانید یکی یا دو مقدار را به هر ترتیب تعریف کنید:

flex-flow: بسته بندی جهت ؛

مقادیر موجود برای هر دو ویژگی در بخش های بعدی توضیح داده خواهد شد.

مقادیر برای خم شدن

DefinitionValue
مقدار پیش فرض همه موارد فلکس در یک خط هستند ، حتی اگر مجبور شوند از مرزها خارج شوندnowrap
موارد فلکس در چندین خط قرار دارد. موقعیت آنها به جهت انعطاف پذیر بستگی داردwrap
موارد فلکس در چندین خط قرار دارد. موقعیت آنها برعکس مقدار در جهت خم استwrap-reverse

مقادیر جهت انعطاف پذیر

DefinitionValue
مقدار پیش فرض ردیف موارد فلکس را در همان جهت متن تنظیم می کندrow
موارد را در جهت مخالف متن تنظیم می کندrow-reverse
همان ردیف است اما از ترازوی عمودی flexbox استفاده می کندcolumn
همان ردیف معکوس است ، اما از ترازوی عمودی flexbox استفاده می کندcolumn-reverse

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

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊