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 بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.
این مقاله چقدر براتون مفید بود؟