خصوصیت box-flex
مثال (خصوصیت box-flex)
در این مثال دو عنصر p انعطاف پذیر تعریف شده است. اگر box والد 300 پیکسل عرض داشته باشد، عرض عنصر p1، برابر 100 پیکسل و عرض عنصر p2 برابر 200 پیکسل خواهد بود:
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}
پشتیبانی مرورگرها
هیچ کدام از مرورگرهای اصلی، خصوصیت box-flex را پشتیبانی نمی کنند.
مرورگر Internet Explorer 10 به پیشوند -ms- نیاز دارد.
مرورگر Firefox به پیشوند -moz- نیاز دارند.
مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
تعریف و کاربرد
با استفاده از خاصیت box-flexible می توان مشخص نمود که عناصر فرزند دارای سایز انعطاف پذیر یا انعطاف ناپذیر باشند.
نکته: سایز عناصری که انعطاف پذیر هستند، با اضافه و کم شدن والدشان، اضافه و کم می شوند. درصورتی که فضای اضافی در box موجود باشد، عناصر انعطاف پذیر کشیده می شوند تا این فضا را پر کنند.
| مقدار پیشفرض | 0.0 (مشخص می کند که عنصر انعطاف ناپذیر است) |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.boxFlex=2.0 |
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| value |
میزان انعطاف پذیری یک عنصر. برای مثال، فرزندی که خاصیتbox-flexible آن 2 است، به نسبت فرزندی که box-flexible آن 1 است دو برابر انعطاف پذیرتر است. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 7590
