الفرق بين المراجعتين لصفحة: «CSS/flex-basis»

المراجعة الحالية بتاريخ 11:08، 4 مارس 2021

الخاصية flex-basis في 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 التي تصف كيف يجب أن يتموضع العنصر في المستند.

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>flex-basis</code>}}</noinclude>
-الخاصية <code>flex-shrink</code> في CSS تُحدِّد القياس الرئيسي (main size) لأحد عناصر flex، وهذه الخاصية تضبط قياس صندوق المحتوى (content box) إلا إذا حُدِّدَ غير ذلك باستخدام الخاصية <code>[[CSS/box-sizing|box-sizing]]</code>.
+الخاصية <code>flex-basis</code> في CSS تُحدِّد القياس الرئيسي (main size) لأحد عناصر flex، وهذه الخاصية تضبط قياس صندوق المحتوى (content box) إلا إذا حُدِّدَ غير ذلك باستخدام الخاصية <code>[[CSS/box-sizing|box-sizing]]</code>.
 == بطاقة الخاصية ==
@@ سطر 102: / سطر 102: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/flex|flex]]</code> صفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: <code>[[CSS/flex-direction|flex-direction]]</code>، و <code>[[CSS/flex-flow|flex-flow]]</code>، و <code>[[CSS/flex-grow|flex-grow]]</code>، و <code>[[CSS/flex-shrink|flex-shrink]]</code>، و <code>[[CSS/flex-wrap|flex-wrap]]</code>.
+* صفحة كل من الخاصيات <code>[[CSS/width|width]]</code>، و <code>[[CSS/bottom|height]]</code> المسؤولة عن تحديد أبعاد العنصر.
+* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند.
 == مصادر ومواصفات ==
 * مواصفة [https://drafts.csswg.org/css-flexbox-1/#flex-shrink CSS Flexible Box Layout Module].