English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يحدد الخاصية flex-basis قيمة الأساس الافتراضية للعنصر المرونة
الجدول أدناه يوضح وصف استعمال هذا الخصائص وتاريخ إصداراته، بالإضافة إلى قواعد استعمال هذا الخصائص في سكربتات JavaScript.
| القيمة الافتراضية: | auto |
|---|---|
| يُستخدم لـ: | المنتجات الإليكترونية |
| الوراثة: | لا يوجد |
| يمكن تحويله إلى: | نعم.يرجى الرجوع خصائص الرسوم المتحركة. |
| الإصدار: | ميزات CSS3 الجديدة |
| قواعد JavaScript: | object.style.flexBasis="180px" |
هذا الخصائص لديه بنية الجملة التالية:
flex-basis: width | auto | initial | inherit
المثال التالي يوضح كيفية استخدام خاصية flex-basis.
.flex-container {
display: flex;
}
.item1 {
background: #ff80c0;
-webkit-flex-basis: 300px; /* Safari 6.1+ */
flex-basis: 300px;
}
.item2 {
background: #8080ff;
-webkit-flex-basis: 30%; /* Safari 6.1+ */
flex-basis: 30%;
}
.item3 {
width: 120px;
background:#0080ff;
}جربها‹/›جدول التالي يصف قيم هذه الخاصية.
| القيمة | الوصف |
|---|---|
| width | طول محدد بأحد وحدات القياس المطلق أو النسبي، يستخدم لتعيين طول العنصر الممتد الأولي. القيم السلبية غير صالحة. |
| auto | عرض العنصر الممتد يساويwidthقيمة الخاصية. إذا لم يتم تحديد خاصية width للعنصر الممتد، فإن العرض يعتمد على محتواه. هذا هو القيمة الافتراضية. |
| initial | وضع هذه الخاصية إلى قيمتها الافتراضية. |
| inherit | إذا تم تحديد هذا، فإن العناصر المرتبطة تأخذ قيمة الخاصية flex-basis من العنصر الأم. |
تطابق المتصفحات للميزة flex-basis، الأرقام في الجدول التالي تعكس أحدث إصدار من المتصفح يدعم هذه الميزة؛ جميع المتصفحات الرئيسية تدعم هذه الميزة.
|
يرجى الرجوع إلى التعليمات التالية:تخطيط صفحات CSS3 المتعددة.
خصائص مرتبطة:align-content,align-items,align-self,display,flex,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.