flex-basis property
ویژگی flex-basis
در (فلکس باکس) CSS، اندازه اولیه عنصر فلکس را مشخص می کند.
نحوه نوشتار
flex-basis: 2rem; flex-basis: 100px; flex-basis: auto;
مقادیر
عرض
مقدار اولیه عرض عنصر (اگر محور اصلی در حالت ردیف یا افقی باشد که مقدار پیشفرض است، عرض عنصر و اگر محور اصلی در حالت عمودی تعیین شده باشد، طول عنصر) را مشخص می کند.این مقدار می تواند توسط واحدهای اندازه CSS مانند (px
,rem
,em
) یا بصورت درصد مشخص شده باشد. اگر مقدار برابر با auto
باشد، عرض عنصر به اندازه عرض محتوای درون آن خواهد بود.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<body> <div class="wrapper"> <p>flex-basis: <span>50px;</span></p> <section> <div class="box1 fb-1">box1</div> <div class="box2"></div> <div class="box3"></div> </section> </div> <div class="wrapper"> <p>flex-basis: <span>auto;</span></p> <section> <div class="box1 fb-2">box1</div> <div class="box2"></div> <div class="box3"></div> </section> </div> <div class="wrapper"> <p>flex-basis: <span>100px;</span></p> <section> <div class="box1 fb-3">box1</div> <div class="box2"></div> <div class="box3"></div> </section> </div> <div class="wrapper"> <p>flex-basis: <span>100%;</span></p> <section> <div class="box1 fb-4">box1</div> <div class="box2"></div> <div class="box3"></div> </section> </div> </body>
css
body { display: flex; flex-wrap: wrap; justify-content: space-around; font: normal 14px sans-serif; } .wrapper { margin: 10px 0; } section { width: 225px; height: 100px; background-color: #e7e7e7; display: flex; align-items: center; justify-content: space-around; } section div { flex-basis: 50px; height: 50px; text-align: center; } p { font-family: consolas; font-size: 1em; } span { color: red; } .fb-1 { flex-basis: 50px; } .fb-2 { flex-basis: auto; } .fb-3 { flex-basis: 100px; } .fb-4 { flex-basis: 100%; } .box1 { background-color: yellow; border: 2px dashed red; } .box2 { background-color: lightsalmon; } .box3 { background-color: lightskyblue; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.