الخاصية flex-basis

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

/* <'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;

القيمة الابتدائية	auto
تُطبَّق على	عناصر flex.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.

أمثلة

مثال عن استخدام الخاصية 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.