ویژگی flex-direction در css

ویژگی flex-direction در css چیدمان عناصر فلکس باکس

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت flex-direction در زبان css توضیحاتی را ارائه نماییم.

ویژگی flex-direction در سومین نسخه زبان طراحی سی اس اس یعنی CSS3 معرفی شده است.

معرفی ویژگی کاربردی flex-direction در زبان طراحی css

توسط خاصیت flex-direction می توانیم آیتم ها یا تگ های html درون یک تگ container پدری ، که در حالت فلکس باکس صفحه آرایی می شوند را، چیدمان افقی یا عمودی نماییم.

نکته مهم

در صورتی که تگ ها یا آیتم های درون تگ container ، انعطاف پذیر نباشند و به عبارتی صفت display در آنها برابر مقدار flex تعیین نشده باشد، خصوصیت flex-direction نیز بی تاثیر خواهد بود. به عبارت دیگر آیتم های درونی در این حالت چیدمان عمودی یا افقی نخواهند شد.

مقادیر صفت کاربردی flex-direction در زبان طراحی سی اس اس

صفت کاربردی flex-direction که در زبان طراحی CSS3 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:

1. مقدار row
2. مقدار row-reverse
3. مقدار column
4. مقدار column-reverse
5. مقدار initial

مقدار row درون خاصیت flex-direction در زبان سی اس اس

اگر خاصیت flex-direction را برابر با مقدار row قرار دهیم، یعنی می خواهیم آیتم هایی را که در حالت فلکس باکس درون تگ container صفحه آرایی شده اند، به صورت ردیفی یا افقی چیدمان کنیم.

به شکل زیر توجه کنید:

مقدار row-reverse درون خاصیت flex-direction در زبان سی اس اس

اگر خاصیت flex-direction را برابر با مقدار row-reverse قرار دهیم، یعنی می خواهیم آیتم هایی را که در حالت فلکس باکس درون تگ container صفحه آرایی شده اند، به صورت ردیفی یا افقی و معکوس چیدمان کنیم.

به شکل زیر توجه کنید:

مقدار column درون خاصیت flex-direction در زبان سی اس اس

اگر خاصیت flex-direction را برابر با مقدار column قرار دهیم، یعنی می خواهیم آیتم هایی را که در حالت فلکس باکس درون تگ container صفحه آرایی شده اند، به صورت ستونی یا عمودی چیدمان کنیم.

به شکل زیر توجه کنید:

مقدار column-reverse درون خاصیت flex-direction در زبان سی اس اس

اگر خاصیت flex-direction را برابر با مقدار column-reverse قرار دهیم، یعنی می خواهیم آیتم هایی را که در حالت فلکس باکس درون تگ container صفحه آرایی شده اند، به صورت ستونی یا عمودی و معکوس چیدمان کنیم.

به شکل زیر توجه کنید:

مقدار initial درون خاصیت flex-direction در زبان سی اس اس

اگر خاصیت flex-direction را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html یا آیتم مورد نظر اعمال می شود.

ویژگی flex-direction در css چیدمان عناصر فلکس باکس

بررسی خاصیت flex-direction از نظر نسخه زبان طراحی سی اس اس

خصوصیت flex-direction در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

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

پشتیبانی مرورگرهای اینترنتی از خاصیت flex-direction در زبان طراحی سی اس اس

خاصیت css
flex-direction	29.0	11.0	28.0	9.0	17.0

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

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

ویژگی flex-direction در css چیدمان عناصر فلکس باکس – اختصاصی سایت آموزی