الخاصية flex-basis

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

الخاصية flex-shrink في CSS تُحدِّد القياس الرئيسي (main size) لأحد عناصر flex، وهذه الخاصية تضبط قياس صندوق المحتوى (content box) إلا إذا حُدِّدَ غير ذلك باستخدام الخاصية box-sizing.

بطاقة الخاصية

القيمة الابتدائية auto
تُطبَّق على عناصر flex.
قابلة للوراثة لا
قابلة للتحريك نعم
القيمة المحسوبة كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.
/* <'width'> */
flex-basis: 10em;      
flex-basis: 3px;
flex-basis: auto;

/* كلمات محجوزة */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* تحديد أبعاد العنصر اعتمادًا على محتواه */
flex-basis: content;

/* القيم العامة */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

أمثلة

مثال عن استخدام الخاصية flex-basis لضبط الأبعاد الرئيسية لعناصر flex، لاحظ أنَّ أبعاد أوّل صندوق هي 100px، أما الصندوق الثاني فأبعاده هي 20% من حاوية flex:
<div id="content">
  <div class="box1">A</div>
  <div class="box2">B</div>
</div>
شيفرة CSS:
#content {
  display: flex;
  width: 500px;
}

#content div {
  border: 3px solid rgba(0,0,0,.2);
  padding: 0.25em;
}

.box1 {
  background-color: salmon;
  flex-basis: 100px;
}

.box2 {
  background-color: lightblue;
  flex-basis: 20%;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 29.0 20.0 11 12.5 9.0

الإصدارات القديمة من بعض المتصفحات (مثل Chrome و IE و Safari) كانت تدعم flexbox لكن مع استخدام سابقة (-webkit- أو -ms-).

البنية العامة

تقبل الخاصية flex-basis قيمةً واحدةً التي إما أن تكون عرضًا <width> أو الكلمة المحجوزة content.

<width>

قيمة طولية <length>، أو نسبة مئوية <percentage> نسبةً إلى الأبعاد الرئيسية لحاوية flex الأب للعنصر.

لا يجوز استخدام قيم سالبة.

content

تؤدي هذه القيمة إلى حساب أبعاد العنصر تلقائيًا اعتمادًا على محتوى عنصر flex.

البنية الرسمية

flex-basis: content | <'width'>;

انظر أيضًا

  • صفحة الخاصية flex صفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: flex-direction، و flex-flow، و flex-grow، و flex-shrink، و flex-wrap.
  • صفحة كل من الخاصيات width، و height المسؤولة عن تحديد أبعاد العنصر.
  • صفحة الخاصية position التي تصف كيف يجب أن يتموضع العنصر في المستند.

مصادر ومواصفات