الخاصية flex-basis

الخاصية 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'>;

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

• مواصفة CSS Flexible Box Layout Module.