Tailwind CSS • المستوى الثاني • الدرس 1

تخطيط العناصر بالتوزيع المرن (Flexbox Basics & Alignment)

أهداف الدرس

تحويل الحاوية إلى نظام مرن باستخدام flex.
محاذاة العناصر أفقيًا بـ justify-* ورأسيًا بـ items-* مع ضبط الفجوات بـ gap-*.
التحويل إلى الاتجاه العمودي بـ flex-col لبناء قوائم مرنة.
فهم الفرق بين justify-between و justify-center و justify-around.

1. قوة Flexbox في Tailwind

يُعد Flexbox الأداة المثالية لبناء شفرات التنقل (Navigation Bars)، والقوائم الأفقية والرأسية، وتوزيع المحتوى بين أطراف الحاوية بسهولة فائقة.

html

<!-- تفعيل Flexbox -->
<div class="flex">...</div>             <!-- أفقي (افتراضي) -->
<div class="flex flex-col">...</div>    <!-- عمودي -->

<!-- التوزيع الأفقي (Main Axis) -->
<div class="flex justify-start">...</div>    <!-- يمين (في RTL) -->
<div class="flex justify-center">...</div>   <!-- الوسط -->
<div class="flex justify-between">...</div>  <!-- الأطراف -->
<div class="flex justify-around">...</div>   <!-- توزيع متساوٍ -->

<!-- المحاذاة الرأسية (Cross Axis) -->
<div class="flex items-center">...</div>     <!-- الوسط -->
<div class="flex items-start">...</div>      <!-- الأعلى -->
<div class="flex items-end">...</div>        <!-- الأسفل -->

<!-- المسافات بين العناصر -->
<div class="flex gap-4">...</div>
<div class="flex gap-x-6 gap-y-2">...</div>

2. مرجع كلاسات Flexbox

justify-* (أفقي)

justify-start — البداية
justify-center — الوسط
justify-end — النهاية
justify-between — الأطراف
justify-around — توزيع متساوٍ

items-* (رأسي)

items-start — الأعلى
items-center — الوسط
items-end — الأسفل
items-stretch — التمدد

الاتجاه

flex-row — أفقي (افتراضي)
flex-col — عمودي
flex-row-reverse — معكوس
flex-wrap — الالتفاف

الفجوات (gap)

gap-2 — 8px
gap-4 — 16px
gap-6 — 24px
gap-x-4 gap-y-2 — مختلف

3. مقارنة بين طرق التوزيع الأفقي

justify-between

◼◼◼

الأول والأخير على الأطراف

justify-center

◼◼◼

كل العناصر في الوسط

justify-around

◼◼◼

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

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

تحدي الدرس الأول: عرض Flexbox الشامل

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

أضف transition-colors إلى رابطَي التنقل (الرئيسية، المسارات).
أضف hover:bg-sky-600 و font-bold لزر "تسجيل الدخول".
أضف space-y-4 للحاوية الرئيسية، ثم غلّف شريط التنقل الأصلي داخل <div>.
أضف قسماً ثانياً بعنوان "justify-center" يحتوي على 3 عناصر <span> بـ flex justify-center gap-3.
أضف قسماً ثالثاً بـ flex justify-around يحتوي على 3 دوائر w-12 h-12 rounded-full bg-emerald-500.
أضف قسماً رابعاً بـ flex flex-col items-center gap-2 يحتوي على عنوان "عمودي" ونص توضيحي.

⏳ جارٍ تحميل المحرر التفاعلي...

فهرس المستوى الانتقال للدرس الثاني