CSS · الدرس ٣ من ٤

رتّب اهتماماتك في صف

ترتّب display: flex عناصر القائمة في صف. تفصل بينها gap، وتسمح flex-wrap بانتقالها إلى سطر آخر عندما تضيق المساحة.

جرّب الآن

غيّر gap من 12px إلى 24px. جرّب إضافة flex-direction: column داخل القاعدة لترتيب القائمة عمودياً، ثم احذفها.

يبني كل درس جديد على صفحتك الشخصية. عندما تعود إلى درس، تظهر مسودتك المحفوظة.

اختر صورة من جهازك

تبقى الصورة في متصفحك ولا تُرفع إلى الموقع. اخترها قبل تشغيل الكود؛ سيُضاف اسم ملفها إلى المثال تلقائياً.

        CSS · style.cssul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
}
        عدّل HTML لمشروعك
            HTML · index.html<main>
  <h1>مرحباً، أنا سارة</h1>
  <p>هذه صفحتي الأولى.</p>
  <ul>
    <li>القراءة</li>
    <li>الرسم</li>
    <li>التعلّم</li>
  </ul>
</main>
            
        
    

صفحتك

تستخدم الفحوصات كودك الحالي. جرّب الصفحة بنفسك أيضاً.

استطعت تبديل القائمة بين صف وعمود؟ اجمع ما جرّبته في تنسيق صفحتك.

التالي: مشروعك: تنسيق الصفحة

أحتاج مساعدة

ضع القواعد داخل أقواس ul. إذا لم تظهر مسافة، تأكّد من بقاء display: flex؛ تحتاج gap هنا إلى هذا الترتيب.

شرح إضافي

احفظ الصفحة على جهازك

نزّل ملف HTML

إذا لم يبدأ التنزيل، انسخ الكود الكامل أدناه إلى ملف نصّي باسم index.html واحفظه بترميز UTF-8.

الكود الكامل للحفظ

جرّب الآن

صفحتك

ملاحظات على عملك