الفرق بين المراجعتين لصفحة: «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>.<syntaxhighlight lang="css">
+الخاصية <code>flex-basis</code> في CSS تُحدِّد القياس الرئيسي (main size) لأحد عناصر flex، وهذه الخاصية تضبط قياس صندوق المحتوى (content box) إلا إذا حُدِّدَ غير ذلك باستخدام الخاصية <code>[[CSS/box-sizing|box-sizing]]</code>.
+== بطاقة الخاصية ==
+{| class="wikitable" style="width: 100%;"
+|-
+! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
+|<code>auto</code>
+|-
+! scope="row" |تُطبَّق على
+|عناصر flex.
+|-
+! scope="row" |قابلة للوراثة
+|لا
+|-
+!قابلة للتحريك
+|نعم
+|-
+! scope="row" |القيمة المحسوبة
+|كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.
+|}<syntaxhighlight lang="css">
 /* <'width'> */
 flex-basis: 10em;
@@ سطر 20: / سطر 40: @@
 flex-basis: unset;
 </syntaxhighlight>
-{| class="wikitable" style="width: 100%;"
-|-
-! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
-|<code>auto</code>
-|-
-! scope="row" |تُطبَّق على
-|عناصر flex.
-|-
-! scope="row" |قابلة للوراثة
-|لا
-|-
-!قابلة للتحريك
-|نعم
-|-
-! scope="row" |القيمة المحسوبة
-|كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.
-|}
 == أمثلة ==
@@ سطر 88: / سطر 89: @@
 تقبل الخاصية <code>flex-basis</code> قيمةً واحدةً التي إما أن تكون عرضًا <code><width></code> أو الكلمة المحجوزة <code>content</code>.
-=== القيمة <code><width></code> ===
+===  <code><width></code> ===
 قيمة طولية <code>[[CSS/length|<length>]]</code>، أو نسبة مئوية <code>[[CSS/percentage|<percentage>]]</code> نسبةً إلى الأبعاد الرئيسية لحاوية flex الأب للعنصر.
 لا يجوز استخدام قيم سالبة.
-=== القيمة <code>content</code> ===
+===  <code>content</code> ===
 تؤدي هذه القيمة إلى حساب أبعاد العنصر تلقائيًا اعتمادًا على محتوى عنصر flex.
@@ سطر 101: / سطر 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].