CSS Academy · درس

أنماط الصيغة المختصرة لـ Flex

أتقن الصيغة المختصرة flex وافهم القيم الشائعة مثل flex: 1 وflex: none وflex: auto

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

مراجعة اختصار flex

يعيّن اختصار flex القيم flex-grow وflex-shrink وflex-basis في تصريح واحد. ويُعد فهم صيغ الاختصار المختلفة أساسيًا لإنشاء تخطيطات عملية.

flex: 1

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

<div class="equal-cols">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

flex: auto

‏flex: auto = flex: 1 1 auto. تبدأ العناصر من الحجم الطبيعي لمحتواها، ثم تتمدد أو تنكمش بنسبة متناسبة. ويحصل المحتوى الأوسع على مساحة أكبر عند التمدد.

<div class="nav-links">
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</div>

flex: none

‏flex: none = flex: 0 0 auto. يكون العنصر ثابتًا؛ فلا يتمدد ولا ينكمش. ويحدّد حجمه العرض أو الارتفاع الطبيعي لمحتواه، أو العرض أو الارتفاع المصرّح به صراحةً.

<div class="row">
  <div class="logo">Logo</div>
  <div>Flexible content</div>
</div>

flex: 0 0 Xpx

عنصر ثابت الحجم وغير مرن. وهذه أوضح طريقة لإنشاء لوحات شريط جانبي بعروض محددة بدقة:

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

‏flex: 1‏ مقابل flex: 1 1 auto

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

نسبة flex: 2

استخدموا قيمًا غير متساوية لـ flex-grow لإجراء توزيعات نسبية:

<div class="split">
  <div class="main">Main (2/3)</div>
  <div class="side">Side (1/3)</div>
</div>

الجمع بين العناصر الثابتة والمرنة

النمط الأكثر شيوعًا في المشاريع العملية: شريط جانبي ثابت + محتوى رئيسي مرن:

<div class="layout">
  <div class="sidebar">Sidebar 280px</div>
  <div class="content">Flexible content</div>
</div>

حيلة flex باستخدام min-width: 0

تملك عناصر Flexbox قيمة افتراضية للخاصية min-width: auto. وقد يمنعها ذلك من الانكماش إلى ما دون حجم محتواها. عيّنوا min-width: 0 للعناصر التي ينبغي أن تنكمش بحرية، مثل حاويات النصوص التي تستخدم الاقتطاع.

<div class="row">
  <div class="text-col">This is a very long line of text that needs to truncate with an ellipsis inside a flex item.</div>
</div>

نمط شبكة البطاقات

شبكة بطاقات متجاوبة ببطاقات مرنة ولكن ضمن حدود:

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

تصحيح أخطاء اختصار flex

استخدموا أدوات DevTools في المتصفح لفحص القيم المحسوبة لكل من flex-grow وflex-shrink وflex-basis. كما يعرض تراكب فاحص Flexbox المساحة الحرة وأحجام العناصر بصريًا.

اختبار سريع

إلى ماذا يتمدد flex: auto؟

مراجعة

احفظوا اختصارات flex الأساسية: flex: 1 (أعمدة متساوية تبدأ من الصفر)، وflex: auto (التمدد انطلاقًا من الحجم الطبيعي)، وflex: none (عنصر ثابت)، وflex: 0 0 Xpx (حجم ثابت). استخدموا min-width: 0 مع أبناء flex التي تحتوي على نص مقتطع. واجمعوا بين العناصر الثابتة والمرنة لإنشاء تخطيطات أشرطة جانبية تقليدية.

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

هل درس «أنماط الصيغة المختصرة لـ Flex» مجاني؟

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

ماذا ستتعلم في «أنماط الصيغة المختصرة لـ Flex»؟

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

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

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

كم من الوقت يستغرق درس «أنماط الصيغة المختصرة لـ Flex»؟

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

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

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

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

تجاوز محاذاة عنصر Flex باستخدام align-self
خاصية order وإعادة الترتيب المرئي
أنماط الصيغة المختصرة لـ Flex
تخطيطات Flexbox الشائعة: شريط التنقل والبطاقات والكائن الإعلامي

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