0Pricing
Frontend Academy · درس

Display: أساسيات block وinline وflex وgrid

بدّل بين قيم display، وشاهد كيف يرتّب كل من block وinline وflex وgrid المحتوى بطرق مختلفة.

Display: أساسيات block وinline وflex وgrid درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

خاصية display

تُعد الخاصية display أهم خصائص CSS للتخطيط. فهي تتحكم في كيفية مشاركة العنصر في تدفق التخطيط وكيفية ترتيب عناصره الأبناء. ومن أكثر القيم استخدامًا: block وinline وinline-block وflex وgrid وnone.

display: block

تشغل عناصر الكتلة العرض الكامل لحاويتها وتبدأ في سطر جديد. ومن أمثلتها: <div> و<p> و<h1>. ويمكنك ضبط العرض والارتفاع والهامش والحشو لعناصر الكتلة.

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

تتدفق العناصر المضمّنة ضمن النص، ولا تبدأ في سطر جديد. ومن أمثلتها: <span> و<a> و<strong>. ولا يؤثر العرض والارتفاع والهوامش الرأسية في العناصر المضمّنة.

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

تجمع inline-block بين السلوكين: يتدفق العنصر ضمن السطر مثل النص، لكنه يقبل العرض والارتفاع والهامش الرأسي مثل عنصر الكتلة. وهذا مفيد للأزرار والشارات التي ينبغي أن تظهر في سطر من النص.

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

تزيل display: none العنصر بالكامل من التخطيط، فلا يشغل أي مساحة. استخدم visibility: hidden لإخفائه مع الحفاظ على المساحة التي كان يشغلها.

Flexbox — تخطيط أحادي البعد

تحوّل display: flex العنصر إلى حاوية مرنة. وتصبح عناصره الأبناء المباشرة عناصر مرنة ترتب نفسها في صف (افتراضيًا) أو عمود. ويتفوق Flex في توزيع المساحة ومحاذاة العناصر.

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

خصائص Flexbox الأساسية

flex-direction: row | column. justify-content: space-between | center | flex-end. align-items: center | flex-start | flex-end | stretch. gap: مسافة بين العناصر من دون استخدام الهامش.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS Grid — تخطيط ثنائي الأبعاد

تحوّل display: grid العنصر إلى حاوية شبكة. وتحدد الصفوف والأعمدة باستخدام grid-template-columns وgrid-template-rows. وتُعد Grid مثالية لتخطيطات الصفحات وشبكات البطاقات.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

الوحدة fr

توزع وحدة fr (الكسر) المساحة المتاحة. ينشئ grid-template-columns: 1fr 2fr 1fr ثلاثة أعمدة، يحصل العمود الأوسط فيها على ضعف المساحة التي يحصل عليها كل من العمودين الآخرين.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

الاختيار بين Flex وGrid

استخدم Flexbox للتخطيطات أحادية البعد (صف من الأزرار أو مجموعة بطاقات). واستخدم Grid للتخطيطات ثنائية الأبعاد (هيكل الصفحة أو معرض صور ذي صفوف وأعمدة محددة). ويمكن استخدامهما معًا في الصفحة نفسها.

display: none مقابل visibility: hidden

display: none: يزيل العنصر من التخطيط، ولا يمكن لقارئات الشاشة الوصول إليه. visibility: hidden: يجعل العنصر غير مرئي، لكنه يظل يشغل مساحة ويبقى في شجرة إمكانية الوصول. opacity: 0: يجعل العنصر غير مرئي، لكنه يظل يشغل مساحة ويمكن الوصول إليه.

تحقق سريع

تحتاج إلى إنشاء شبكة بطاقات متجاوبة تضم عدة صفوف وأعمدة. ما أفضل قيمة display للبدء؟

مراجعة: قيم display

تشغل block العرض الكامل. وتتدفق inline مع النص. وتجمع inline-block بين السلوكين. وترتب flex العناصر الأبناء في بُعد واحد. وترتب grid العناصر الأبناء في بُعدين. وتزيل none العنصر من التخطيط. أتقن هذه القيم، وستتحكم في كل تخطيط على الويب.

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

هل درس «Display: أساسيات block وinline وflex وgrid» مجاني؟

نعم — نص درس «Display: أساسيات block وinline وflex وgrid» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «Display: أساسيات block وinline وflex وgrid»؟

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

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

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

كم من الوقت يستغرق درس «Display: أساسيات block وinline وflex وgrid»؟

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

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

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

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

  1. المحددات والتتالي
  2. الألوان والطباعة ونموذج الصندوق
  3. Display: أساسيات block وinline وflex وgrid
  4. تحديد الموضع: relative وabsolute وfixed وsticky
← العودة إلى Frontend Academy