صفت grid-auto-flow در css
صفت grid-auto-flow در css مکان آیتم grid نامشخص
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت grid-auto-flow در زبان css توضیحاتی را ارائه نماییم.
ویژگی grid-auto-flow در سطح 1 زبان طراحی سی اس اس یعنی ماژول سی اس اس گرید سطح 1 معرفی شده است.
معرفی ویژگی کاربردی grid-auto-flow در زبان طراحی سی اس اس
توسط خاصیت grid-auto-flow می توانیم مکان آیتم های گرید که به شکل واضح مشخص نشده اند را به صورت خودکار مشخص نماییم.
مقادیر صفت کاربردی grid-auto-flow در زبان طراحی سی اس اس
صفت کاربردی grid-auto-flow که در ماژول سی اس اس گرید سطح 1 معرفی شده است، 5 مقدار می پذیرد که عبارت است از:
- مقدار row
- مقدار column
- مقدار dense
- مقدار row dense
- مقدار column dense
صفت grid-auto-flow در css مکان آیتم grid نامشخص
مقدار row درون خاصیت grid-auto-flow در زبان سی اس اس
اگر خاصیت grid-auto-flow را برابر با مقدار row قرار دهیم، یعنی می خواهیم آیتم های گرید به همان حالت عادی خود یعنی ردیفی کنار هم قرار بگیرند.
مقدار row به عنوان مقدار پیش فرض خصوصیت grid-auto-flow می باشد.
مثال براساس مقدار row برای خاصیت grid-auto-flow
[html] div {grid-auto-flow: row;} [/html]
مقدار column درون خاصیت grid-auto-flow در زبان سی اس اس
اگر خاصیت grid-auto-flow را برابر با مقدار column قرار دهیم، یعنی می خواهیم عناصر بصورت ستونی چیده شده یعنی ستون به ستون آیتم ها مکان ها را پر می کنند.
مثال براساس مقدار column برای خاصیت grid-auto-flow
[html] div {grid-auto-flow: column;} [/html]
صفت grid-auto-flow در css مکان آیتم grid نامشخص
مقدار dense درون خاصیت grid-auto-flow در زبان سی اس اس
اگر خاصیت grid-auto-flow را برابر با مقدار dense قرار دهیم، یعنی می خواهیم الگوریتم چیدمان ، بعد از چیدمان عادی آیتم های گرید ، یک بار دیگر به عقب بر گردد. و اگر فضای خالی در آیتم گرید وجود داشته باشد آن فضا را با اولین آیتم گریدی که بعد از آن فضا وجود دارد ، پر کند.
مثال براساس مقدار dense برای خاصیت grid-auto-flow
[html] div {grid-auto-flow: dense;} [/html]
مقدار row dense درون خاصیت grid-auto-flow در زبان سی اس اس
اگر خاصیت grid-auto-flow را برابر با مقدار row dense قرار دهیم، یعنی می خواهیم الگوریتم چیدمان ، بعد از چیدمان عادی آیتم های گرید ، یک بار دیگر به عقب بر گردد. و اگر فضای خالی در ردیف آیتم گرید وجود داشته باشد آن فضا را با اولین ردیف آیتم گریدی که بعد از آن فضا وجود دارد ، پر کند.
مثال براساس مقدار row dense برای خاصیت grid-auto-flow
[html] div {grid-auto-flow: row dense;} [/html]
مقدار column dense درون خاصیت grid-auto-flow در زبان سی اس اس
اگر خاصیت grid-auto-flow را برابر با مقدار column dense قرار دهیم، الگوریتم چیدمان ، بعد از چیدمان عادی آیتم های گرید ، یک بار دیگر به عقب بر گردد. و اگر فضای خالی در ستون آیتم گرید وجود داشته باشد آن فضا را با اولین ستون آیتم گریدی که بعد از آن فضا وجود دارد ، پر کند.
مثال براساس مقدار column dense برای خاصیت grid-auto-flow
[html] div {grid-auto-rows: column dense;} [/html]
بررسی خاصیت grid-auto-flow از نظر نسخه زبان طراحی سی اس اس
خصوصیت grid-auto-flow در سطح 1 زبان طراحی سی اس اس یعنی ماژول CSS گرید سطح 1 معرفی شده است.
بررسی ساختاری خصوصیت grid-auto-flow
عناوین ساختاری خاصیت grid-auto-flow | وضعیت ساختاری خاصیت grid-auto-flow |
مقدار پیش فرض | row |
قابلیت توارث | ندارد |
قابلیت تحرک | دارد |
ورژن css صفت | ماژول CSS گرید سطح 1 |
سینتکس صفت در جاوا اسکریپت | "object.style.gridAutoFlow="row dense |
پشتیبانی مرورگرهای اینترنتی از خاصیت grid-auto-flow در زبان طراحی سی اس اس
خاصیت css | |||||
grid-auto-flow | 57 | 16 | 52 | 10 | 44 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
صفت grid-auto-flow در css مکان آیتم grid نامشخص – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید