ویژگی flex-shrink در css کاهش عرض عناصر Flexbox

ویژگی flex-shrink در css کاهش عرض عناصر Flexbox

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

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

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

توسط خاصیت flex-shrink می توانیم عرض آیتم یا آیتم هایی که با حالت Flexbox درون یک تگ container پدری صفحه آرایی شدند را کاهش دهیم.

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

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

مقدار number
مقدار initial

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

اگر خاصیت flex-shrink را برابر با مقدار number ( مقدار عددی ) قرار دهیم، یعنی می خواهیم به همان میزان عرض یک آیتم فلکس باکس را کاهش دهیم.

مقدار پیش فرض خصوصیت flex-shrink معادل عدد ۱ می باشد.

مثال براساس مقدار number برای خاصیت flex-shrink

[html] .container div#item2 {flex-shrink: 2;} [/html]

در مثال بالا مقدار عددی این خاصیت را برابر ۲ قرار دادیم. این یعنی می خواهیم تگ div با شناسه item2 که داخل یک تگ container والد قرار گرفته، ۲ برابر نسبت به آیتم های دیگر کوچک تر شود.

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

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

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

ویژگی flex-shrink در css کاهش عرض عناصر Flexbox

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

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

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


عناوین ساختاری خاصیت flex-shrink	وضعیت ساختاری خاصیت flex-shrink
مقدار پیش فرض	۱
قابلیت توارث	ندارد
قابلیت تحرک	دارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	object.style.flexShrink="5"