ویژگی flex-grow در CSS

flex-grow property

ویژگی flex-grow در (فلکس باکس) CSS مشخص می کند که عنصر در ارتباط با عناصر دیگر در عنصرِ والد فلکس تا چه اندازه بزرگ شود. جهت بزرگ شدن عنصر (طولی یا عرضی) به جهت تعیین شده در محور اصلی توسط ویژگی flex-direction بستگی دارد.

نحوه نوشتار

flex-grow: 2;
flex-grow: 3.3;

مقادیر

عدد​

اعداد میزان رشد یا بزرگتر شدن عنصر نسبت به فضای باقی مانده و در ارتباط با عناصر دیگر در عنصر والد فلکس را مشخص می کند.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="wrapper1">
    <p style="direction: rtl;">
        با مقدار پیشفرض ;flex-grow: <span>1</span> برای تمام باکسها
    </p>
    <section>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </section>
</div>
<div class="wrapper2">
    <p>flex-gow: <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-gow: <span>3;</span></p>
    <section>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </section>
</div>
<div class="wrapper4">
    <p>flex-gow: <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;
    flex-wrap: wrap;
}
span { color: red; }
section div {
    flex-grow: 1; 
}
.box1 {
    background-color: yellow;
    border: 4px dashed #444444;
}
.box2 { background-color: coral; }
.box3 { background-color: lightskyblue; }
.wrapper1 .box1 { border: 0; }
.wrapper2 .box1 {
     flex-grow: 1.8; 
}
.wrapper3 .box1 {
     flex-grow: 3; 
} 
.wrapper4 .box1 {
     flex-grow: 4; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها به جز Internet Explorer , Safari و Safari On iOS از این ویژگی در CSS پشتیبانی می کنند.