خاصية Flex Basis
آخر تحديث: 2026-09-13
flex-basis خاصية Flex Basis
تضبط خاصية flex-basis الحجم الرئيسي الأولي لعنصر flex قبل توزيع المساحة المتبقية — أي “الحجم المثالي” للعنصر. قيمتها الافتراضية هي auto، التي تحدد حجم العنصر من محتواه أو من width/height مضبوطة. وعند استخدام طول محدد، يبدأ العنصر من ذلك الحجم ثم ينمو أو ينكمش وفقًا لـ flex-grow و flex-shrink.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
flex-basis: auto | content | <length> | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | content | كلمة مفتاحية | يُحدد بواسطة auto أو content |
<length> | <percentage> | النوع | حجم أساسي ثابت |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-basis | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： عندما يكون flex-basis يساوي 0، تبدأ جميع العناصر من حجم أساسي 0 ويُوزَّع الفضاء بالكامل بحسب flex-grow فقط — وهي الوصفة القياسية لتخطيطات الأعمدة متساوية العرض.
مهم： لـ flex-basis أولوية أعلى من width/height لكنها أقل من max-width/max-height و min-width/min-height. وعند ضبط flex-basis و width معًا، يفوز flex-basis.
❓ الأسئلة الشائعة
Qما الفرق بين flex-basis و width؟
Aفي تخطيط flex، لـ flex-basis أولوية أعلى من width: فهو يحدد الحجم الأولي للعنصر على المحور الرئيسي ويشارك في حساب النمو/الانكماش، بينما تُطبَّق width فقط quando يكون flex-basis هو auto. كما أن flex-basis يغذّي الحجم الأساسي في flex-grow و flex-shrink، وهو ما لا تفعله width عادية. يُوصى بتعريف الحجم الأساسي لعناصر flex بـ flex-basis وترك width للسياقات غير المرنة.
Qما الفرق بين flex-basis: auto و flex-basis: content؟
Aauto تحدد حجم العنصر من محتواه أو من width/height صريحة، أيهما ينطبق؛ أما content فتحدده من المحتوى فقط متجاهلةً أي إعدادات width/height. وتتمتع الكلمة المفتاحية content بدعم أضعف في المتصفحات وقد تتصرف بشكل مختلف quando لا يحتوي العنصر على نص أو يحتوي محتوىً مُستبدَلًا، لذا يُوصى بـ auto في المشاريع الفعلية — وسلوكها كافٍ في معظم الحالات. فإذا احتجت حقًا إلى تحديد حسب المحتوى لا تستطيع auto التعبير عنه، فاختبر الكلمة المفتاحية content في المتصفحات المستهدفة أولًا.
Qما الفرق بين flex-basis: 0 و flex-basis: auto؟
Aflex-basis: auto يستخدم المحتوى أو width كحجم أساسي، لذا تبدأ العناصر ذات المحتوى المختلف بعروض مختلفة ولا يُشارَك إلا الفضاء المتبقي عبر flex-grow. أما flex-basis: 0 فلا يصفر عرض الأساس، فيُوزَّع الفضاء بالكامل تناسبيًا وتصبح الأعمدة متساوية تمامًا. و flex: 1 يتمدد إلى 1 1 0% بينما flex: auto يتمدد إلى 1 1 auto؛ ويتصرف الاثنان بشكل مختلف جدًا.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
