flex-shrink property
ویژگی flex-shrink
در (فلکس باکس) CSS مشخص می کند که عنصر در ارتباط با عناصر دیگر درون عنصر والدِ فلکس، چه مقدار کوچک شود. جهت کوچک شدن عنصر (طولی یا عرضی) به جهت تعیین شده محور اصلی توسط ویژگی flex-direction
بستگی دارد.
نحوه نوشتار
flex-shrink: 3; flex-shrink: 0.5;
نکته: این ویژگی به همراه دو ویژگی flex-grow
و flex-basis
بکار می رود. بدین جهت که باید مجموع اندازه اولیه عناصر در محور اصلی که توسط flex-basis
مشخص می شود، بیشتر از اندازه عنصر والد فلکس باشد.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<div class="wrapper1"> <p style="direction: rtl;"> با مقدار پیشفرض ;flex-shrink: <span>1</span> و ;flex-grow: <span>1</span> و ;flex-basis: <span>300px</span> برای تمام باکسها </p> <section> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </section> </div> <div class="wrapper2"> <p>flex-shrink: <span>1.8;</span></p> <section> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </section> </div> <div class="wrapper3"> <p>flex-shrink: <span>3;</span></p> <section> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </section> </div> <div class="wrapper4"> <p>flex-shrink: <span>4;</span></p> <section> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </section> </div>
css
body { display: flex; align-items: center; flex-direction: column; text-align: center; font-family: "Segoe UI"; } section { width: 600px; height: 50px; background-color: #dddddd; display: flex; } span { color: red; } section div { flex-shrink: 1; flex-grow: 1; flex-basis: 300px; } .box1 { background-color: yellow; border: 4px dashed #444444; } .box2 { background-color: coral; } .box3 { background-color: lightskyblue; } .wrapper1 .box1 { border: 0; } .wrapper2 .box1 { flex-shrink: 1.8; } .wrapper3 .box1 { flex-shrink: 3; } .wrapper4 .box1 { flex-shrink: 4; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.