ویژگی flex در CSS

flex property

ویژگی کوتاه نویسی flex در (فلکس باکس) CSS مقادیر سه ویژگی flex-grow , flex-shrink و flex-basis را مشخص می کند. توسط این ویژگی نحوه بزرگتر شدن، کوچکتر شدن و حداقل اندازه عنصر مشخص می شود.

نحوه نوشتار

flex: 1;
flex: 1 2;
flex: 1 1 100px;
flex: 2 200px;

flex: flex-grow | flex-shrink | flex-basis;

مقادیر

flex-grow​

مقدار ویژگی flex-grow را مشخص می کند. مقدار پیشفرض آن 1 و مقادیر منفی نامعتبر هستند.

flex-shrink​

مقدار ویژکی flex-shrink را مشخص می کند. مقدار پیشفرض آن 1 و مقادیر منفی نامعتبر هستند.

flex-basis​

مقدار ویژگی flex-basis را مشخص می کند. مقدار پیشفرض 0 است. مقدار این ویژگی باید یکی از واحدهای اندازه CSS نظیر (px, em ,rem, %) باشد.

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

html

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

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

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.