ویژگی flex-shrink در css
ویژگی flex-shrink در css کاهش عرض عناصر Flexbox
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت flex-shrink در زبان css توضیحاتی را ارائه نماییم.
ویژگی flex-shrink در سومین نسخه زبان طراحی سی اس اس یعنی CSS3 معرفی شده است.
معرفی ویژگی کاربردی flex-shrink در زبان طراحی css
توسط خاصیت flex-shrink می توانیم عرض آیتم یا آیتم هایی که با حالت Flexbox درون یک تگ container پدری صفحه آرایی شدند را کاهش دهیم.
مقادیر صفت کاربردی flex-shrink در زبان طراحی سی اس اس
صفت کاربردی flex-shrink که در زبان طراحی CSS3 معرفی شده است، 2 مقدار می پذیرد که عبارتند از:
- مقدار number
- مقدار initial
مقدار number درون خاصیت flex-shrink در زبان سی اس اس
اگر خاصیت flex-shrink را برابر با مقدار number ( مقدار عددی ) قرار دهیم، یعنی می خواهیم به همان میزان عرض یک آیتم فلکس باکس را کاهش دهیم.
مقدار پیش فرض خصوصیت flex-shrink معادل عدد 1 می باشد.
مثال براساس مقدار number برای خاصیت flex-shrink
[html] .container div#item2 {flex-shrink: 2;} [/html]
در مثال بالا مقدار عددی این خاصیت را برابر 2 قرار دادیم. این یعنی می خواهیم تگ div با شناسه item2 که داخل یک تگ container والد قرار گرفته، 2 برابر نسبت به آیتم های دیگر کوچک تر شود.
به شکل زیر توجه کنید:
مقدار initial درون خاصیت flex-shrink در زبان سی اس اس
اگر خاصیت flex-shrink را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html یا آیتم مورد نظر اعمال می شود.
ویژگی flex-shrink در css کاهش عرض عناصر Flexbox
بررسی خاصیت flex-shrink از نظر نسخه زبان طراحی سی اس اس
خصوصیت flex-shrink در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.
بررسی ساختاری خصوصیت flex-shrink
عناوین ساختاری خاصیت flex-shrink | وضعیت ساختاری خاصیت flex-shrink |
مقدار پیش فرض | 1 |
قابلیت توارث | ندارد |
قابلیت تحرک | دارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | object.style.flexShrink="5" |
پشتیبانی مرورگرهای اینترنتی از خاصیت flex-shrink در زبان طراحی سی اس اس
خاصیت css | |||||
flex-shrink | 29.0 | 11.0 | 28.0 | 9.0 | 17.0 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
ویژگی flex-shrink در css کاهش عرض عناصر Flexbox – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید