تخطيط Tailwind CSS Flexbox: حاويات مرنة والتحكم في المحاذاة

Q: ما الفرق بين flex-1 و flex-auto؟

flex-1 يعادل flex: 1 1 0% — تتقاسم العناصر المساحة بدءاً من 0%، متجاهلة عرض المحتوى. flex-auto يعادل flex: 1 1 auto — تتقاسم العناصر المساحة بناءً على عرض محتواها. في معظم الحالات، يُوصى بـ flex-1 .

Q: كيف أتحكم في تباعد الأسطر بعد flex-wrap؟

استخدم فئات content-* (مثل content-center و content-between ) للتحكم في توزيع الأسطر المتعددة، وقمنها مع gap-* لتباعد العناصر. gap-y-* يتحكم تحديداً في تباعد الأسطر.

Q: كيف أحقق التوسيط الأفقي والعمودي؟

استخدم flex items-center justify-center . هذه هي تقنية التوسيط الأكثر شيوعاً مع Flexbox، وهي أبسط بكثير من نهج margin: auto + position التقليدي.

Q: ما الفرق بين gap و margin؟

gap يُعيّن على الحاوية ويعالج تباعد الحواف تلقائياً بدون طي الهوامش. margin يُعيّن على العناصر الفرعية ويتطلب معالجة تباعد العنصر الأول/الأخير. gap هو النهج المُوصى به.

حاوية Flex والاتجاه

Flexbox هو نموذج تخطيط أبعادي واحد. يمكنك إنشاء حاوية flex باستخدام display: flex واستخدام فئات الاتجاه للتحكم في كيفية ترتيب العناصر الفرعية.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض حاوية Flex والاتجاه</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- flex-row تخطيط أفقي -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-row (الافتراضي)</h3>
      <div class="flex flex-row gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">عنصر 1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">عنصر 2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">عنصر 3</div>
      </div>
    </div>

    <!-- flex-col تخطيط عمودي -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-col</h3>
      <div class="flex flex-col gap-4 bg-gray-100 p-4 rounded w-48">
        <div class="bg-green-500 text-white px-4 py-2 rounded text-center">عنصر 1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded text-center">عنصر 2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded text-center">عنصر 3</div>
      </div>
    </div>

    <!-- flex-row-reverse أفقي معكوس -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-row-reverse</h3>
      <div class="flex flex-row-reverse gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">عنصر 1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">عنصر 2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">عنصر 3</div>
      </div>
    </div>

    <!-- flex-col-reverse عمودي معكوس -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-col-reverse</h3>
      <div class="flex flex-col-reverse gap-4 bg-gray-100 p-4 rounded w-48">
        <div class="bg-orange-500 text-white px-4 py-2 rounded text-center">عنصر 1</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded text-center">عنصر 2</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded text-center">عنصر 3</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع فئات اتجاه Flex:

الفئة	قيمة CSS	الوصف
`flex-row`	`flex-direction: row`	تخطيط أفقي (الافتراضي)
`flex-row-reverse`	`flex-direction: row-reverse`	تخطيط أفقي معكوس
`flex-col`	`flex-direction: column`	تخطيط عمودي
`flex-col-reverse`	`flex-direction: column-reverse`	تخطيط عمودي معكوس

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين خصائص display: flex و flex-direction في CSS، بينما يستخدم Tailwind أسماء الفئات مثل flex و flex-row و flex-col مباشرة في HTML.

💡 نصيحة: flex-row هو الاتجاه الافتراضي ويمكن حذفه. بعد إنشاء حاوية بـ flex، يتم ترتيب العناصر الفرعية أفقياً بشكل افتراضي.

التفاف Flex

بشكل افتراضي، تتقلص عناصر flex لتناسب الحاوية. استخدم flex-wrap للسماح للعناصر بالالتفاف إلى أسطر متعددة.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض التفاف Flex</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- flex-nowrap بدون التفاف -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-nowrap (الافتراضي)</h3>
      <div class="flex flex-nowrap gap-4 bg-gray-100 p-4 rounded overflow-x-auto">
        <div class="bg-blue-500 text-white px-6 py-4 rounded flex-shrink-0 w-48">عنصر 1</div>
        <div class="bg-blue-600 text-white px-6 py-4 rounded flex-shrink-0 w-48">عنصر 2</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded flex-shrink-0 w-48">عنصر 3</div>
        <div class="bg-blue-800 text-white px-6 py-4 rounded flex-shrink-0 w-48">عنصر 4</div>
        <div class="bg-blue-900 text-white px-6 py-4 rounded flex-shrink-0 w-48">عنصر 5</div>
      </div>
    </div>

    <!-- flex-wrap التفاف -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-wrap</h3>
      <div class="flex flex-wrap gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-6 py-4 rounded w-48">عنصر 1</div>
        <div class="bg-green-600 text-white px-6 py-4 rounded w-48">عنصر 2</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded w-48">عنصر 3</div>
        <div class="bg-green-800 text-white px-6 py-4 rounded w-48">عنصر 4</div>
        <div class="bg-green-900 text-white px-6 py-4 rounded w-48">عنصر 5</div>
      </div>
    </div>

    <!-- flex-wrap-reverse التفاف معكوس -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-wrap-reverse</h3>
      <div class="flex flex-wrap-reverse gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-6 py-4 rounded w-48">عنصر 1</div>
        <div class="bg-purple-600 text-white px-6 py-4 rounded w-48">عنصر 2</div>
        <div class="bg-purple-700 text-white px-6 py-4 rounded w-48">عنصر 3</div>
        <div class="bg-purple-800 text-white px-6 py-4 rounded w-48">عنصر 4</div>
        <div class="bg-purple-900 text-white px-6 py-4 rounded w-48">عنصر 5</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين flex-wrap: wrap في CSS، بينما يستخدم Tailwind فئة flex-wrap مباشرة. بشكل افتراضي، يمنع flex-nowrap الالتفاف.

⚠️ ملاحظة: عند استخدام flex-nowrap، قد تفيض العناصر عن الحاوية. يُنصح بتقرينه مع overflow-x-auto أو استخدام flex-wrap للسماح بالالتفاف.

محاذاة المحور الرئيسي (justify)

تحكم فئات justify-* في كيفية محاذاة عناصر Flexbox على طول المحور الرئيسي.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض محاذاة المحور الرئيسي</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- justify-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-start</h3>
      <div class="flex justify-start gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-center -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-center</h3>
      <div class="flex justify-center gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-end -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-end</h3>
      <div class="flex justify-end gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-between -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-between</h3>
      <div class="flex justify-between bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-around -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-around</h3>
      <div class="flex justify-around bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-red-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-evenly -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-evenly</h3>
      <div class="flex justify-evenly bg-gray-100 p-4 rounded">
        <div class="bg-teal-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-teal-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-teal-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع فئات محاذاة المحور الرئيسي:

الفئة	قيمة CSS	الوصف
`justify-start`	`justify-content: flex-start`	محاذاة إلى البداية
`justify-center`	`justify-content: center`	محاذاة إلى المنتصف
`justify-end`	`justify-content: flex-end`	محاذاة إلى النهاية
`justify-between`	`justify-content: space-between`	تباعد متساوٍ بين العناصر
`justify-around`	`justify-content: space-around`	تباعد متساوٍ على جانبي كل عنصر
`justify-evenly`	`justify-content: space-evenly`	تباعد متساوٍ بين جميع العناصر

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين justify-content في CSS، بينما يستخدم Tailwind أسماء الفئات مثل justify-start و justify-center مباشرة. between و around و evenly هي ثلاث أنماط لتوزيع المسافة.

💡 نصيحة: يُستخدم justify-between بشكل شائع في أشرطة التنقل لدفع الشعار إلى اليسار والقائمة إلى اليمين. يُستخدم justify-center لتوسيط المحتوى.

محاذاة المحور المتقاطع (items)

تحكم فئات items-* في كيفية محاذاة عناصر Flexbox على طول المحور المتقاطع.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض محاذاة المحور المتقاطع</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- items-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-start</h3>
      <div class="flex items-start gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">قصير</div>
        <div class="bg-blue-600 text-white px-4 py-6 rounded">متوسط</div>
        <div class="bg-blue-700 text-white px-4 py-8 rounded">طويل</div>
      </div>
    </div>

    <!-- items-center -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-center</h3>
      <div class="flex items-center gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-green-500 text-white px-4 py-2 rounded">قصير</div>
        <div class="bg-green-600 text-white px-4 py-6 rounded">متوسط</div>
        <div class="bg-green-700 text-white px-4 py-8 rounded">طويل</div>
      </div>
    </div>

    <!-- items-end -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-end</h3>
      <div class="flex items-end gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">قصير</div>
        <div class="bg-purple-600 text-white px-4 py-6 rounded">متوسط</div>
        <div class="bg-purple-700 text-white px-4 py-8 rounded">طويل</div>
      </div>
    </div>

    <!-- items-stretch -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-stretch (الافتراضي)</h3>
      <div class="flex items-stretch gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-orange-500 text-white px-4 rounded flex items-center justify-center">قصير</div>
        <div class="bg-orange-600 text-white px-4 rounded flex items-center justify-center">متوسط</div>
        <div class="bg-orange-700 text-white px-4 rounded flex items-center justify-center">طويل</div>
      </div>
    </div>

    <!-- items-baseline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-baseline</h3>
      <div class="flex items-baseline gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded text-sm">صغير</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded text-2xl">كبير</div>
        <div class="bg-red-700 text-white px-4 py-2 rounded text-base">خط أساس</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع فئات محاذاة المحور المتقاطع:

الفئة	قيمة CSS	الوصف
`items-start`	`align-items: flex-start`	محاذاة إلى البداية
`items-center`	`align-items: center`	محاذاة إلى المنتصف
`items-end`	`align-items: flex-end`	محاذاة إلى النهاية
`items-stretch`	`align-items: stretch`	تمديد لملء المساحة (الافتراضي)
`items-baseline`	`align-items: baseline`	محاذاة حسب خط الأساس

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين align-items في CSS، بينما يستخدم Tailwind أسماء الفئات مثل items-start و items-center مباشرة. يُعتبر items-baseline مفيداً بشكل خاص لمحاذاة النصوص بأحجام خطوط مختلفة.

💡 نصيحة: دمج items-center مع justify-center يحقق توسطاً أفقياً وعمودياً مثالياً.

محاذاة المحتوى (content)

تحكم فئات content-* في توزيع عناصر Flexbox متعددة الأسطر على طول المحور المتقاطع. لا تدخل حيز التنفيذ إلا عند تفعيل flex-wrap.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض محاذاة المحتوى</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- content-center -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-center</h3>
      <div class="flex flex-wrap content-center gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-blue-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-blue-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>

    <!-- content-between -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-between</h3>
      <div class="flex flex-wrap content-between gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-green-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-green-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>

    <!-- content-around -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-around</h3>
      <div class="flex flex-wrap content-around gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-purple-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-purple-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين align-content في CSS، بينما يستخدم Tailwind أسماء الفئات مثل content-center و content-between مباشرة. تعمل هذه الخاصية فقط في حاويات Flexbox متعددة الأسطر.

⚠️ ملاحظة: فئات content-* تؤثر فقط عند تفعيل flex-wrap ووجود أسطر متعددة. للتخطيطات ذات السطر الواحد، استخدم items-* للتحكم في محاذاة المحور المتقاطع.

محاذاة الذات (self)

تسمح فئات self-* لعناصر Flexbox الفردية بتجاوز إعدادات items-* للحاوية والتحكم المستقل في محاذاتها على المحور المتقاطع.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض محاذاة الذات</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- self يتجاوز إعدادات items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">self يتجاوز إعدادات items</h3>
      <div class="flex items-start gap-4 bg-gray-100 p-4 rounded h-40">
        <div class="bg-blue-500 text-white px-4 py-2 rounded self-start">self-start</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded self-center">self-center</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded self-end">self-end</div>
        <div class="bg-blue-800 text-white px-4 py-2 rounded self-stretch">self-stretch</div>
      </div>
    </div>

    <!-- تطبيق عملي -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تطبيق عملي: محاذاة شريط التنقل</h3>
      <div class="flex items-center gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-600 text-white px-4 py-2 rounded">شعار</div>
        <div class="flex-1 bg-green-500 text-white px-4 py-2 rounded self-start">قائمة (محاذاة علوية)</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded self-center">زر (موسّط)</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع فئات محاذاة الذات:

الفئة	قيمة CSS	الوصف
`self-auto`	`align-self: auto`	وراثة إعداد الحاوية
`self-start`	`align-self: flex-start`	محاذاة الذات إلى البداية
`self-center`	`align-self: center`	توسيط الذات
`self-end`	`align-self: flex-end`	محاذاة الذات إلى النهاية
`self-stretch`	`align-self: stretch`	تمديد الذات لملء المساحة
`self-baseline`	`align-self: baseline`	محاذاة الذات حسب خط الأساس

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين align-self على عناصر محددة في CSS، بينما يستخدم Tailwind أسماء الفئات مثل self-start و self-center مباشرة في HTML.

نمو وانكماش Flex

تحكم flex-grow و flex-shrink و flex-1 في كيفية مشاركة عناصر Flexbox للمساحة المتبقية.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض نمو وانكماش Flex</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- flex-grow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-grow</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded flex-grow">flex-grow</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">ثابت</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">ثابت</div>
      </div>
    </div>

    <!-- flex-1 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-1 (شائع الاستخدام)</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded flex-1">flex-1</div>
      </div>
    </div>

    <!-- flex-auto -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-auto</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded flex-auto">flex-auto</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded flex-auto">flex-auto</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">ثابت</div>
      </div>
    </div>

    <!-- flex-none -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-none</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white px-4 py-2 rounded flex-none">flex-none</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded flex-1">flex-1</div>
      </div>
    </div>

    <!-- flex-shrink-0 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-shrink-0 (منع الانكماش)</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded flex-shrink-0 w-64">لا انكماش</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded flex-1">يمكنه الانكماش</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع فئات حجم Flex:

الفئة	قيمة CSS	الوصف
`flex-grow`	`flex-grow: 1`	السماح بالنمو
`flex-grow-0`	`flex-grow: 0`	منع النمو
`flex-shrink`	`flex-shrink: 1`	السماح بالانكماش
`flex-shrink-0`	`flex-shrink: 0`	منع الانكماش
`flex-1`	`flex: 1 1 0%`	حصة متساوية من المساحة (مُوصى به)
`flex-auto`	`flex: 1 1 auto`	حصة متساوية بناءً على المحتوى
`flex-none`	`flex: none`	بدون نمو، بدون انكماش
`flex-initial`	`flex: 0 1 auto`	الحالة الأولية

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين flex-grow و flex-shrink و flex-basis كثلاث خصائص منفصلة في CSS، بينما يجمع Tailwind في flex-1 التكوين الأكثر شيوعاً في فئة واحدة.

💡 نصيحة: flex-1 هي فئة Flex الأكثر استخداماً، حيث تسمح للعناصر بالمشاركة المتساوية في المساحة المتبقية. يأخذ flex-auto بعين الاعتبار عرض المحتوى، مما يجعله مناسباً عندما يتغير طول محتوى العناصر.

تباعد الفجوة (gap)

تحكم فئات gap-* في التباعد بين عناصر Flexbox، لتحل محل نهج الهامش التقليدي.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض تباعد الفجوة</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- gap-4 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-4 (16px)</h3>
      <div class="flex flex-wrap gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-6 py-4 rounded">1</div>
        <div class="bg-blue-600 text-white px-6 py-4 rounded">2</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded">3</div>
        <div class="bg-blue-800 text-white px-6 py-4 rounded">4</div>
      </div>
    </div>

    <!-- gap-x و gap-y -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-x-8 gap-y-4 (تحكم منفصل أفقي وعمودي)</h3>
      <div class="flex flex-wrap gap-x-8 gap-y-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-6 py-4 rounded w-32 text-center">1</div>
        <div class="bg-green-600 text-white px-6 py-4 rounded w-32 text-center">2</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded w-32 text-center">3</div>
        <div class="bg-green-800 text-white px-6 py-4 rounded w-32 text-center">4</div>
        <div class="bg-green-900 text-white px-6 py-4 rounded w-32 text-center">5</div>
      </div>
    </div>

    <!-- أحجام فجوات مختلفة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">أحجام فجوات مختلفة</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-2 (8px)</p>
          <div class="flex gap-2 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-6 (24px)</p>
          <div class="flex gap-6 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-10 (40px)</p>
          <div class="flex gap-10 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين margin على العناصر الفرعية، لكن العناصر الأولى والأخيرة تحتاج إلى معالجة خاصة. يُعيّن Tailwind gap-* التباعد على الحاوية مباشرة، مما يعالج الحالات الحدية تلقائياً.

💡 نصيحة: تعمل gap-* أيضاً مع تخطيطات Grid. استخدم gap-x-* و gap-y-* للتحكم في التباعد الأفقي والعمودي بشكل مستقل.

مثال شامل

بجمع جميع المفاهيم أعلاه، دعنا ننشئ تخطيط Flexbox متكاملاً.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال Flexbox شامل</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- شريط التنقل -->
    <nav class="bg-white rounded-lg shadow p-4">
      <div class="flex justify-between items-center">
        <div class="text-xl font-bold text-blue-600">شعار</div>
        <div class="hidden md:flex items-center gap-6">
          <a href="#" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">المنتجات</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">حول</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">اتصل بنا</a>
        </div>
        <button class="bg-blue-600 text-white px-4 py-2 rounded">تسجيل الدخول</button>
      </div>
    </nav>

    <!-- قسم البطل -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg shadow p-12">
      <div class="flex flex-col md:flex-row items-center gap-8">
        <div class="flex-1">
          <h1 class="text-3xl font-bold text-white mb-4">مرحباً بك في Flexbox</h1>
          <p class="text-blue-100 mb-6">نظام تخطيط مرن وقوي لإنشاء صفحات متجاوبة بسهولة</p>
          <div class="flex gap-4">
            <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold">ابدأ الآن</button>
            <button class="border border-white text-white px-6 py-3 rounded-lg">اعرف المزيد</button>
          </div>
        </div>
        <div class="flex-shrink-0">
          <div class="w-48 h-48 bg-white/20 rounded-full flex items-center justify-center">
            <span class="text-6xl">🎯</span>
          </div>
        </div>
      </div>
    </div>

    <!-- بطاقات الميزات -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">📐</span>
        </div>
        <h3 class="font-semibold mb-2">محاذاة مرنة</h3>
        <p class="text-gray-600 text-sm flex-1">تدعم أنماط محاذاة المحور الرئيسي والمحور المتقاطع والذات</p>
      </div>
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">📏</span>
        </div>
        <h3 class="font-semibold mb-2">حجم مرن</h3>
        <p class="text-gray-600 text-sm flex-1">توزيع ذكي للمساحة عبر flex-grow و flex-shrink</p>
      </div>
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">🔄</span>
        </div>
        <h3 class="font-semibold mb-2">التفاف متجاوب</h3>
        <p class="text-gray-600 text-sm flex-1">flex-wrap يلتف تلقائياً للتكيف مع أحجام الشاشات المختلفة</p>
      </div>
    </div>

    <!-- التذييل -->
    <footer class="bg-gray-800 text-white rounded-lg shadow p-6">
      <div class="flex flex-col md:flex-row justify-between items-center gap-4">
        <div class="text-gray-400">&copy; 2024 مثال Flexbox</div>
        <div class="flex gap-4">
          <a href="#" class="text-gray-400 hover:text-white">سياسة الخصوصية</a>
          <a href="#" class="text-gray-400 hover:text-white">شروط الاستخدام</a>
          <a href="#" class="text-gray-400 hover:text-white">اتصل بنا</a>
        </div>
      </div>
    </footer>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة CSS مطول لشريط التنقل وقسم البطل وشبكة البطاقات وغيرها من التخطيطات، بينما ينجز Tailwind نفس الشيء بفئات utility مباشرة في HTML، مما يقلل الكود بأكثر من 60%.

❓ أسئلة شائعة

س ما الفرق بين flex-1 و flex-auto؟

ج flex-1 يعادل flex: 1 1 0% — تتقاسم العناصر المساحة بدءاً من 0%، متجاهلة عرض المحتوى. flex-auto يعادل flex: 1 1 auto — تتقاسم العناصر المساحة بناءً على عرض محتواها. في معظم الحالات، يُوصى بـ flex-1.

س كيف أتحكم في تباعد الأسطر بعد flex-wrap؟

ج استخدم فئات content-* (مثل content-center و content-between) للتحكم في توزيع الأسطر المتعددة، وقمنها مع gap-* لتباعد العناصر. gap-y-* يتحكم تحديداً في تباعد الأسطر.

س كيف أحقق التوسيط الأفقي والعمودي؟

ج استخدم flex items-center justify-center. هذه هي تقنية التوسيط الأكثر شيوعاً مع Flexbox، وهي أبسط بكثير من نهج margin: auto + position التقليدي.

س ما الفرق بين gap و margin؟

ج gap يُعيّن على الحاوية ويعالج تباعد الحواف تلقائياً بدون طي الهوامش. margin يُعيّن على العناصر الفرعية ويتطلب معالجة تباعد العنصر الأول/الأخير. gap هو النهج المُوصى به.

📖 ملخص

flex ينشئ حاوية flex؛ flex-row/flex-col يتحكمان في اتجاه التخطيط
flex-wrap يسمح للعناصر بالالتفاف؛ flex-nowrap يبقيها في سطر واحد
justify-* يتحكم في محاذاة المحور الرئيسي؛ items-* يتحكم في محاذاة المحور المتقاطع
content-* يتحكم في توزيع الأسطر المتعددة؛ self-* يتحكم في محاذاة العنصر الفردي
flex-1/flex-auto/flex-none يتحكمون في سلوك النمو والانكماش
gap-* يُعيّن تباعد العناصر على الحاوية، أبسط من استخدام الهامش

📝 تمارين

⭐ أنشئ شريط تقل مُوَسَّط أفقياً باستخدام flex justify-between items-center مع الشعار على اليسار والقائمة على اليمين
⭐⭐ أنشئ قائمة بطاقات متجاوبة باستخدام flex flex-wrap gap-6 للالتفاف التلقائي، مع بطاقات تستخدم flex-1 للمشاركة المتساوية في المساحة
⭐⭐⭐ أنشئ قسم بطل متكاملاً يحتوي على عنوان ووصف وأزرار وصورة، باستخدام flexbox لتخطيط جانبي يتحول تلقائياً إلى ترتيب عمودي على الأجهزة المحمولة