CSS Academy · درس

Flex Grow وShrink وBasis

تحكّم في كيفية نمو عناصر flex وانكماشها، وحدّد حجمها الأساسي باستخدام الصيغة المختصرة flex.

الدرس 4 من 413 خطوة

Flex Grow وShrink وBasis درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

الاختصار flex

يعيّن الاختصار flex على عناصر flex ثلاث قيم: flex-grow وflex-shrink وflex-basis.

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

تعيّن flex-basis الحجم الابتدائي لعنصر flex قبل تمدده أو انكماشه. وهي تتجاوز width (في الاتجاه الأفقي). وتستخدم auto عرض العنصر أو حجم محتواه.

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

تحدد flex-grow مقدار تمدد العنصر مقارنةً بالعناصر الشقيقة عند توفر مساحة فارغة. وتعني القيمة 0 عدم التمدد. وتحصل القيم الأعلى على مساحة أكبر بنسبة متناسبة.

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

مثال على flex-grow

إذا كانت لدى حاوية مساحة فارغة مقدارها 300px، وكان لعنصرين قيمتا flex-grow تساويان 1 و2، فسيحصل الأول على 100px إضافية، والثاني على 200px إضافية (بنسبة 1:2).

flex-shrink

تتحكم flex-shrink في مقدار انكماش العنصر عند عدم توفر مساحة كافية. والقيمة الافتراضية هي 1 (تنكمش جميع العناصر بالتساوي). وتمنع القيمة 0 الانكماش.

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

قيم الاختصار flex الشائعة

احفظ هذه الأنماط الشائعة:

flex: 1 = التمدد والانكماش بالتساوي، مع أساس يساوي 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (عنصر ثابت)
flex: 0 0 200px = حجم ثابت قدره 200px، من دون تمدد أو انكماش

flex: 1 — توزيع متساوٍ

يؤدي تعيين flex: 1 لجميع العناصر الابنة إلى تقسيم المساحة المتاحة بالتساوي. إذ يصبح الأساس 0%، فتنمو العناصر بدءًا من لا شيء وتقسم المساحة بنسبة متناسبة.

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis مقارنةً بـ width

تتقدم flex-basis على width في اتجاه المحور الرئيسي. فإذا عيّنت الخاصيتين معًا، فستكون الغلبة لـ flex-basis (ما لم تكن قيمتها auto، إذ تحيل عندها إلى width).

تحديد الحجم الداخلي مقارنةً بالحجم الخارجي

عند استخدام flex-basis: 0 (كما في flex: 1)، يبدأ العنصر من 0 ثم ينمو بنسبة متناسبة — أي توزيع متناسب فعلي. أما مع flex-basis: auto، فتبدأ العناصر من حجم محتواها الطبيعي ثم تنمو.

نمط الأعمدة الثلاثة التقليدي

تخطيط تقليدي يتكون من شريط جانبي ثابت + محتوى رئيسي مرن + شريط جانبي ثابت:

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

min-width وmax-width مع flex

استخدم min-width وmax-width إلى جانب flex-grow للتحكم في حدود التمدد:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

تحقق سريع

يحتوي عنصر ما على flex: 0 0 200px. ماذا يعني ذلك؟

أجب عليها في الدرس التفاعلي

مراجعة

توزّع flex-grow المساحة الإضافية بنسبة متناسبة. وتتحكم flex-shrink في كيفية انضغاط العناصر. وتعيّن flex-basis الحجم الابتدائي. ويتيح الاختصار flex: 1 توزيع المساحة بالتساوي. استخدم flex: 0 0 Xpx للعناصر ذات الحجم الثابت، وflex: 1 للعناصر المرنة في الحاوية نفسها.

البدء مجانًا

تعلم CSS مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 40
الدروس: 159

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «Flex Grow وShrink وBasis» مجاني؟

نعم — نص درس «Flex Grow وShrink وBasis» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Flex Grow وShrink وBasis»؟

تحكّم في كيفية نمو عناصر flex وانكماشها، وحدّد حجمها الأساسي باستخدام الصيغة المختصرة flex. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «Flex Grow وShrink وBasis»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy