flex shrink در CSS

دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 1 دقیقه آخرین بروز رسانی: 21 بهمن 1399

ویژگی flex-shrink در CSS به شما امکان می دهد تعیین کنید که یک مورد flex اگر فضای کافی برای قرار دادن آن در ظرف flex نداشته باشد ، چه مقدار کوچک می شود:

/* Safari 6.1 and above */
a:nth-of-type(1) {
    -webkit-flex-shrink: 2;  	
} 
/* Standard syntax */
a:nth-of-type(1) {
    flex-shrink: 2;
}

این خاصیت کاملاً مخالف فلکس-رشد است. آن ها اغلب با هم استفاده می شوند و همچنین می توانید از مختصر CSS flex برای هر دوی آن ها استفاده کنید.

بررسی flex shrink در CSS

flex-shrink فقط نیاز به تعیین یک مقدار در یک عدد بدون واحد دارد:

flex-shrink: مقدار؛

مقدار پیش فرض CSS flex-shrink 1 است ، به این معنی که این عنصر نمی تواند بیشتر از اندازه لازم برای متناسب با محتوای آن کوچک شود. اگر 0 را به عنوان مقدار تعریف کنید ، مورد flex به هیچ وجه کوچک نمی شود. شما نمی توانید از مقادیر منفی استفاده کنید.

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

تصور کنید که ما سه مورد را در یک ظرف فلکس داریم. ببینید مقادیر فلکس آن ها چه چیزی را مشخص می کند:

1/6 از فضای ظرف را از دست می دهد تا متناسب با همه موارد باشد	;flex-shrink: 1	First item
3/6 (نیمی) از فضای خالی ظرف را از دست می دهد تا متناسب با همه موارد باشد	;flex-shrink: 3	Second item
ازای 2/6 (یک سوم) فضای خالی که کانتینر ندارد تا متناسب با همه موارد باشد	;flex-shrink: 2	Third item

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊