تعیین چگونگی کوچک شدن (در هنگام عدم وجود فضای کافی) برای آیتم های (Item) جعبه انعطاف پذیر (Flexbox)، با مشخصه flex-shrink ، در CSS

جعبه انعطاف پذیر (Flexbox) را در آموزش زیر شرح دادیم :

تعیین چگونگی کوچک شدن (در هنگام عدم وجود فضای کافی) برای آیتم های (Item) جعبه انعطاف پذیر (Flexbox)، با مشخصه flex-shrink :

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

اگر مقدار مشخصه flex-shrink برابر 0 باشد، یعنی حتی در صورت عدم وجود فضای کافی، آیتم هرگز کوچک نشود :

اگر مقدار مشخصه flex-shrink برابر 1 باشد (مقدار پیش فرض)، یعنی آیتم به نسبت مساوی با سایر آیتم ها کوچک شود :

اگر مقدار مشخصه flex-shrink بزرگتر از 1 باشد، یعنی آیتم نسبت به سایر آیتم هایی که مقدار کوچکتر (برای مشخصه flex-shrink ) دارند، بیشتر کوچک شود :

به مثال زیر توجه کنید :

مثال
خطا - صفحه را دوباره بارگذاری کنید
مثال
خطا - صفحه را دوباره بارگذاری کنید
نویسنده علیرضا گلمکانی
شماره کلید 27210
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)