خاصیت flex-direction در CSS - وب سایت PNLdev

یک نمونه ساده از خاصیت flex-direction:

flex-direction: row-reverse;

آزمایشگاه

تعریف و کاربرد

خاصیت flex-direction جهت آیتم هایی را که انعطاف پذیر هستند را تعیین می کند.

نکته: اگر تگ مربوطه به یک آیتم انعطاف پذیر نباشد، خاصیت flex-direction تاثیرش را از دست می دهد.

#	توضیحات
مقدار پیشفرض	ردیف
ارث بری	خیر
انیمیشن	خیر
نسخه	CSS3
نگارش JS	object.style.flexDirection="column-reverse"

اعدادی که در فیلد های مرورگر ها درج شده اند، بیانگر ورژن ساپورت کننده خاصیت flex-direction هستند.

#	کروم	ادج	فایرفاکس	سافاری	اپرا
flex-direction

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

مقادیر	توضیحات
row	آیتم ها به صورت افقی و با حالتی پیش فرض نمایش داده می شوند.
row-reverse	آیتم ها به صورت ردیف قرار می گیرند اما به صورت معکوس.
column	آیتم ها به صورت ستونی نمایش داده می شوند.
column-reverse	آیتم ها به صورت ستونی قرار می گیرند اما به صورت معکوس.
initial	این مقدار را به ویژگی پیش فرض خود اضافه می کند.
inherit	این مقدار را از تگ والد خود به ارث می برد.

CSS Tutorial: CSS Flexible Box

مرجع CSS: ویژگی flex-flow

مرجع CSS: ویژگی flex-wrap

مرجع CSS: ویژگی flex

مرجع CSS: ویژگی flex-grow

مرجع CSS: ویژگی flex-shrink

مرجع CSS: ویژگی مبتنی بر flex

مرجع HTML DOM: ویژگی flexDirection

CSS Reference

مرجع CSS

خاصیت های CSS