تعیین چگونگی کوچک شدن (در هنگام عدم وجود فضای کافی) برای آیتم های (Item) جعبه انعطاف پذیر (Flexbox)، با مشخصه flex-shrink ، در CSS
جعبه انعطاف پذیر (Flexbox) را در آموزش زیر شرح دادیم :
تعیین چگونگی کوچک شدن (در هنگام عدم وجود فضای کافی) برای آیتم های (Item) جعبه انعطاف پذیر (Flexbox)، با مشخصه
flex-shrink :
هنگام ساخت جعبه انعطاف پذیر (Flexbox)، می توانیم با استفاده از مشخصه
flex-shrink برای هر آیتم، تعیین کنیم که اگر فضای کافی برای نمایش آیتم ها وجود نداشت، آنگاه هر آیتم به چه مقدار کوچک شود.
اگر مقدار مشخصه flex-shrink برابر 0 باشد، یعنی حتی در صورت عدم وجود فضای کافی، آیتم هرگز کوچک نشود :
اگر مقدار مشخصه flex-shrink برابر 1 باشد (مقدار پیش فرض)، یعنی آیتم به نسبت مساوی با سایر آیتم ها کوچک شود :
اگر مقدار مشخصه flex-shrink بزرگتر از 1 باشد، یعنی آیتم نسبت به سایر آیتم هایی که مقدار کوچکتر (برای مشخصه
flex-shrink ) دارند، بیشتر کوچک شود :
به مثال زیر توجه کنید :