لدي مشكلة في تمدد عنصر صاحب الكلاس content

مرحبًا خالد،
يرجى توجيه أسئلتك المتعلقة بالدورة إلى قسم الأسئلة الخاص بالدرس الذي يتعلق بالمشكلة التي تواجهها. وليس في قسم الأسئلة العامة. 

ويُرجى ضغط جميع الملفات في ملف واحد، حتى يستطيع المدرب معاينة المشكلة بشكل أفضل.

لتحقيق تمدد العناصر وفقًا للكلاس "content" في CSS و HTML، يمكنك استخدام خاصية CSS المسماة "flexbox". تساعد خاصية "flexbox" في تنظيم وتوزيع العناصر داخل العنصر الأم، مما يسمح بتمددها وانضباطها بشكل ديناميكي.

<div class="container">
  <div class="item">عنصر 1</div>
  <div class="item">عنصر 2</div>
  <div class="item">عنصر 3</div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
  background-color: lightgray;
  padding: 10px;
}

في هذا المثال، قمنا بإنشاء عنصر div بكلاس "container" ليكون العنصر الأم الذي يحتوي على العناصر الفرعية. ثم قمنا بتعريف الكلاس "item" للعناصر الفرعية. باستخدام display: flex; في CSS لعنصر الأم، يتم تفعيل خاصية "flexbox". وباستخدام flex: 1; في الكلاس "item"، يتم تحديد أن العناصر الفرعية ستتمدد بنسبة متساوية لملء المساحة المتاحة داخل العنصر الأم.