أدوات Flexbox

إتقان Flexbox مع Tailwind CSS

Flexbox هو أحد أقوى أنظمة التخطيط في CSS، ويجعل Tailwind استخدامه سهلاً للغاية. مع Flexbox، يمكنك إنشاء تخطيطات معقدة ومستجيبة بأقل قدر من الكود. فهم هذه الأدوات سيحول طريقة بنائك لواجهات المستخدم.

تمكين Flexbox

أساس استخدام Flexbox هو أداة flex، والتي تحول العنصر إلى حاوية flex:

<!-- حاوية flex أساسية -->
<div class="flex">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

<!-- حاوية inline flex -->
<div class="inline-flex">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>

<!-- مثال شريط التنقل -->
<nav class="flex bg-gray-800 text-white p-4">
  <a href="#" class="px-3 py-2">الرئيسية</a>
  <a href="#" class="px-3 py-2">من نحن</a>
  <a href="#" class="px-3 py-2">الخدمات</a>
  <a href="#" class="px-3 py-2">اتصل بنا</a>
</nav>

اتجاه Flex

تحكم في اتجاه عناصر flex باستخدام أدوات الاتجاه:

<!-- أفقي (افتراضي) -->
<div class="flex flex-row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- أفقي معكوس -->
<div class="flex flex-row-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- عمودي -->
<div class="flex flex-col">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- عمودي معكوس -->
<div class="flex flex-col-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- مثال عملي: تخطيط بطاقة -->
<div class="flex flex-col bg-white rounded-lg shadow p-6">
  <img src="icon.svg" class="size-12 mb-4" alt="أيقونة">
  <h3 class="text-xl font-bold mb-2">عنوان الميزة</h3>
  <p class="text-gray-600">نص وصف الميزة هنا</p>
</div>

التفاف Flex

افتراضياً، تحاول عناصر flex أن تتناسب مع سطر واحد. تحكم في سلوك الالتفاف:

<!-- بدون التفاف (افتراضي) -->
<div class="flex flex-nowrap">
  <div class="w-1/3">عنصر 1</div>
  <div class="w-1/3">عنصر 2</div>
  <div class="w-1/3">عنصر 3</div>
  <div class="w-1/3">عنصر 4 (يفيض)</div>
</div>

<!-- التفاف العناصر -->
<div class="flex flex-wrap">
  <div class="w-1/3">عنصر 1</div>
  <div class="w-1/3">عنصر 2</div>
  <div class="w-1/3">عنصر 3</div>
  <div class="w-1/3">عنصر 4 (يلتف إلى سطر جديد)</div>
</div>

<!-- الالتفاف بالعكس -->
<div class="flex flex-wrap-reverse">
  <div class="w-1/3">عنصر 1</div>
  <div class="w-1/3">عنصر 2</div>
  <div class="w-1/3">عنصر 3</div>
  <div class="w-1/3">عنصر 4</div>
</div>

<!-- مثال سحابة الوسوم -->
<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded">JavaScript</span>
  <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded">React</span>
  <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded">Tailwind CSS</span>
  <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded">Node.js</span>
  <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded">TypeScript</span>
</div>

Justify Content (المحاذاة الأفقية)

تحكم في كيفية توزيع عناصر flex على طول المحور الرئيسي:

<!-- البداية (افتراضي) -->
<div class="flex justify-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- الوسط -->
<div class="flex justify-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- النهاية -->
<div class="flex justify-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- مسافة بينية -->
<div class="flex justify-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- مسافة حولية -->
<div class="flex justify-around">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- مسافة متساوية -->
<div class="flex justify-evenly">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- تمدد -->
<div class="flex justify-stretch">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- عادي (السلوك الافتراضي) -->
<div class="flex justify-normal">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- رأس مع شعار وتنقل -->
<header class="flex justify-between items-center p-4 bg-white shadow">
  <div class="text-xl font-bold">الشعار</div>
  <nav class="flex space-x-4">
    <a href="#">الرئيسية</a>
    <a href="#">من نحن</a>
    <a href="#">اتصل بنا</a>
  </nav>
</header>

<!-- مجموعة أزرار بمسافة متساوية -->
<div class="flex justify-evenly p-4">
  <button class="px-4 py-2 bg-blue-500 text-white rounded">زر 1</button>
  <button class="px-4 py-2 bg-blue-500 text-white rounded">زر 2</button>
  <button class="px-4 py-2 bg-blue-500 text-white rounded">زر 3</button>
</div>

<!-- محتوى مركزي -->
<div class="flex justify-center items-center h-screen">
  <div class="text-center">
    <h1 class="text-4xl font-bold mb-4">مرحباً</h1>
    <p class="text-gray-600">محتوى مركزي</p>
  </div>
</div>

Align Items (المحاذاة العمودية)

تحكم في كيفية محاذاة عناصر flex على طول المحور المتقاطع:

<!-- تمدد (افتراضي) -->
<div class="flex items-stretch h-32">
  <div class="bg-blue-100">عنصر 1</div>
  <div class="bg-blue-200">عنصر 2</div>
  <div class="bg-blue-300">عنصر 3</div>
</div>

<!-- البداية (الأعلى) -->
<div class="flex items-start h-32">
  <div>أعلى</div>
  <div>محاذاة</div>
</div>

<!-- الوسط -->
<div class="flex items-center h-32">
  <div>وسط</div>
  <div>محاذاة</div>
</div>

<!-- النهاية (الأسفل) -->
<div class="flex items-end h-32">
  <div>أسفل</div>
  <div>محاذاة</div>
</div>

<!-- خط الأساس -->
<div class="flex items-baseline h-32">
  <div class="text-4xl">كبير</div>
  <div class="text-sm">صغير</div>
  <div>عادي</div>
</div>

<!-- نمط شائع: أيقونة ونص مركزيان -->
<button class="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded">
  <svg class="size-5" fill="currentColor"><!-- أيقونة --></svg>
  <span>انقر هنا</span>
</button>

Align Self

تجاوز قيمة align-items لعناصر flex الفردية:

<div class="flex items-start h-32">
  <div>عنصر 1 (أعلى)</div>
  <div class="self-center">عنصر 2 (وسط)</div>
  <div class="self-end">عنصر 3 (أسفل)</div>
  <div class="self-stretch">عنصر 4 (تمدد)</div>
</div>

<!-- تلقائي (يرث من الوالد) -->
<div class="self-auto">يستخدم قيمة align-items من الوالد</div>

<!-- مثال عملي: شارة موضوعة بشكل مختلف -->
<div class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow">
  <img src="avatar.jpg" class="size-12 rounded-full" alt="مستخدم">
  <div class="flex-1">
    <h3 class="font-bold">محمد أحمد</h3>
    <p class="text-sm text-gray-600">مطور برمجيات</p>
  </div>
  <span class="self-start px-2 py-1 bg-green-100 text-green-800 text-xs rounded">
    متصل
  </span>
</div>

Flex Grow و Shrink

تحكم في كيفية نمو عناصر flex لملء المساحة المتاحة أو تقلصها عند الحاجة:

<!-- ينمو لملء المساحة -->
<div class="flex">
  <div class="flex-1 bg-blue-100">ينمو للملء</div>
  <div class="w-32 bg-blue-200">عرض ثابت</div>
</div>

<!-- لا ينمو -->
<div class="flex">
  <div class="flex-none w-64 bg-blue-100">ثابت</div>
  <div class="flex-1 bg-blue-200">ينمو</div>
</div>

<!-- الحجم الأولي -->
<div class="flex-initial">حجم أولي</div>

<!-- تلقائي -->
<div class="flex-auto">تلقائي</div>

<!-- مثال تخطيط لوحة تحكم -->
<div class="flex h-screen">
  <aside class="flex-none w-64 bg-gray-800 text-white p-4">
    شريط جانبي (ثابت)
  </aside>
  <main class="flex-1 overflow-y-auto p-8">
    محتوى رئيسي (ينمو للملء)
  </main>
</div>

<!-- يتقلص عند الحاجة (افتراضي) -->
<div class="flex">
  <div class="flex-shrink w-64">يمكن أن يتقلص</div>
  <div class="flex-shrink w-64">يمكن أن يتقلص</div>
  <div class="flex-shrink w-64">يمكن أن يتقلص</div>
</div>

<!-- لا يتقلص -->
<div class="flex">
  <div class="flex-shrink-0 w-64">لن يتقلص</div>
  <div class="flex-shrink w-64">سيتقلص إذا لزم الأمر</div>
</div>

<!-- اقتطاع النص في حاوية flex -->
<div class="flex items-center space-x-4">
  <img src="avatar.jpg" class="flex-shrink-0 size-12 rounded-full" alt="صورة رمزية">
  <div class="flex-1 min-w-0">
    <p class="truncate">هذا نص طويل جداً سيتم اقتطاعه</p>
  </div>
</div>

أدوات Gap

أضف مسافات متسقة بين عناصر flex دون هوامش:

<!-- فجوة أفقية وعمودية -->
<div class="flex flex-wrap gap-4">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

<!-- فجوة أفقية فقط -->
<div class="flex gap-x-4">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

<!-- فجوة عمودية فقط -->
<div class="flex flex-col gap-y-6">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

<!-- أحجام فجوة مختلفة -->
<div class="flex gap-2">فجوة صغيرة</div>
<div class="flex gap-4">فجوة متوسطة</div>
<div class="flex gap-8">فجوة كبيرة</div>

<!-- شبكة بطاقات مع فجوة -->
<div class="flex flex-wrap gap-6">
  <div class="w-64 bg-white rounded-lg shadow p-6">بطاقة 1</div>
  <div class="w-64 bg-white rounded-lg shadow p-6">بطاقة 2</div>
  <div class="w-64 bg-white rounded-lg shadow p-6">بطاقة 3</div>
</div>

الترتيب (Order)

غيّر الترتيب المرئي لعناصر flex دون تغيير HTML:

<div class="flex">
  <div class="order-3">الأول في HTML، الثالث بصرياً</div>
  <div class="order-1">الثاني في HTML، الأول بصرياً</div>
  <div class="order-2">الثالث في HTML، الثاني بصرياً</div>
</div>

<!-- قيم الترتيب: order-1 إلى order-12، بالإضافة إلى order-first، order-last، order-none -->
<div class="order-first">دائماً أولاً</div>
<div class="order-last">دائماً أخيراً</div>
<div class="order-none">الترتيب الافتراضي (0)</div>

<!-- إعادة ترتيب مستجيبة -->
<div class="flex flex-col md:flex-row">
  <div class="order-2 md:order-1">
    شريط جانبي (أسفل على الموبايل، يسار على سطح المكتب)
  </div>
  <div class="order-1 md:order-2">
    محتوى رئيسي (أعلى على الموبايل، يمين على سطح المكتب)
  </div>
</div>

الملخص

في هذا الدرس، أتقنت أدوات Flexbox:

• إنشاء حاويات flex: flex، inline-flex
• الاتجاه: flex-row، flex-col، flex-row-reverse، flex-col-reverse
• الالتفاف: flex-wrap، flex-nowrap، flex-wrap-reverse
• المحاذاة الأفقية: justify-start/center/end/between/around/evenly
• المحاذاة العمودية: items-start/center/end/stretch/baseline
• المحاذاة الفردية: self-start/center/end/stretch/auto
• النمو والتقلص: flex-1، flex-none، flex-shrink-0
• المسافات: gap، gap-x، gap-y
• الترتيب: order-1 إلى order-12، order-first، order-last

Flexbox ضروري للتخطيطات الحديثة. في الدرس التالي، سنستكشف أدوات CSS Grid للتخطيطات ثنائية الأبعاد.