ویژگی flex-shrink در CSS

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 پشتیبانی می کنند.