NahdaAIنهضة
Tailwind CSS • المستوى الأول • الدرس 4

الأحجام والتحكم بالعناصر (Sizing, Display & Overflow)

العودة لفهرس المستوى

أهداف الدرس

  • التحكم في الأبعاد بـ w-* (العرض) و h-* (الارتفاع).
  • استخدام max-w-* لحصر العرض الأقصى والتوسيط بـ mx-auto.
  • إدارة المحتوى الزائد بـ overflow-y-auto و max-h-*.
  • إخفاء/إظهار العناصر بأنماط hidden md:block المتجاوبة.

1. إتقان الأحجام والأبعاد

تتيح لك كلاسات Sizing ضبط أحجام الحاويات والمكونات بدقة، سواء بقيم بكسل مسبقة التهيئة أو بنسب مئوية سلسة لتناسب أحجام الشاشات المختلفة.

html
<!-- نسب مئوية -->
<div class="w-full">...</div>     <!-- 100% -->
<div class="w-1/2">...</div>      <!-- 50% -->
<div class="w-1/3">...</div>      <!-- 33.33% -->
<div class="w-2/3">...</div>      <!-- 66.66% -->

<!-- وحدات الثمانية (8px Grid) -->
<div class="w-32">...</div>       <!-- 128px -->
<div class="w-48">...</div>       <!-- 192px -->
<div class="w-64">...</div>       <!-- 256px -->

<!-- أقصى عرض + توسيط -->
<div class="w-full max-w-md mx-auto">...</div>

<!-- التمرير عند تجاوز الحد -->
<div class="max-h-24 overflow-y-auto">...</div>

2. مرجع العرض والارتفاع

العرض (Width)
  • w-full — 100% من الأب
  • w-1/2 — 50% من الأب
  • w-64 — 256px ثابت
  • max-w-md — حد أقصى 448px
  • max-w-screen-lg — حد شاشة 1024px
الارتفاع (Height)
  • h-12 — 48px
  • h-20 — 80px
  • h-full — 100% من الأب
  • h-screen — ارتفاع الشاشة
  • max-h-24 — حد أقصى 96px
العرض (Display)
  • block — عنصر كتلة
  • inline-block — سطر + كتلة
  • hidden — مخفي
  • md:block — ظاهر من md وما فوق
التمرير (Overflow)
  • overflow-hidden — إخفاء الزائد
  • overflow-y-auto — تمرير عمودي تلقائي
  • overflow-x-auto — تمرير أفقي
  • overflow-scroll — تمرير دائم

3. عرض محتوى زائد (Overflow)

overflow-visible

المحتوى يتجاوز الحدود (الافتراضي).

overflow-y-auto

شريط تمرير يظهر عند الحاجة فقط.

overflow-hidden

إخفاء المحتوى الزائد تماماً.

التطبيق العملي المباشر

تحدي الدرس الرابع: إتقان الأحجام والتمرير

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

  1. غيّر ارتفاع جميع العناصر الثلاثة من h-12 إلى h-20.
  2. أضف space-y-4 للحاوية الرئيسية لتباعد أفضل بين العناصر.
  3. أضف حاوية جديدة (صندوق تمرير) بـ max-h-24 overflow-y-auto تحتوي على 4 فقرات نصية.
  4. أضف صنفاً بصرياً للصندوق: bg-slate-900 border border-slate-700 rounded-xl p-3 text-sm text-slate-300.
  5. أضف صندوقاً مخفياً بـ hidden md:block بخلفية bg-purple-500/20 يحتوي على رسالة "ظاهر فقط على md+".
  6. احتفظ بعنوان البطاقة والمحتوى الأصلي دون حذف.
⏳ جارٍ تحميل المحرر التفاعلي...
الدرس السابقالانتقال للمستوى الثاني