Tailwind CSS: تصميم Flexbox في Tailwind CSS

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 هو النهج الموصى به.

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

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Container and Direction Demo</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 horizontal layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-row (default)</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">Item 1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">Item 2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">Item 3</div>
      </div>
    </div>

    <!-- flex-col vertical layout -->
    <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">Item 1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded text-center">Item 2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded text-center">Item 3</div>
      </div>
    </div>

    <!-- flex-row-reverse reversed horizontal -->
    <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">Item 1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">Item 2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">Item 3</div>
      </div>
    </div>

    <!-- flex-col-reverse reversed vertical -->
    <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">Item 1</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded text-center">Item 2</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded text-center">Item 3</div>
      </div>
    </div>
  </div>
</body>
</html>

45 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة اتجاه المرونة:

الفئة	قيمة 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، يتم ترتيب العناصر الفرعية أفقيًّا بشكل افتراضي.

2. فليكس راب

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Wrap Demo</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 no wrapping -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-nowrap (default)</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">Item 1</div>
        <div class="bg-blue-600 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 2</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 3</div>
        <div class="bg-blue-800 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 4</div>
        <div class="bg-blue-900 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 5</div>
      </div>
    </div>

    <!-- flex-wrap wrapping -->
    <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">Item 1</div>
        <div class="bg-green-600 text-white px-6 py-4 rounded w-48">Item 2</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded w-48">Item 3</div>
        <div class="bg-green-800 text-white px-6 py-4 rounded w-48">Item 4</div>
        <div class="bg-green-900 text-white px-6 py-4 rounded w-48">Item 5</div>
      </div>
    </div>

    <!-- flex-wrap-reverse reversed wrapping -->
    <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">Item 1</div>
        <div class="bg-purple-600 text-white px-6 py-4 rounded w-48">Item 2</div>
        <div class="bg-purple-700 text-white px-6 py-4 rounded w-48">Item 3</div>
        <div class="bg-purple-800 text-white px-6 py-4 rounded w-48">Item 4</div>
        <div class="bg-purple-900 text-white px-6 py-4 rounded w-48">Item 5</div>
      </div>
    </div>
  </div>
</body>
</html>

43 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

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

3. محاذاة المحور الرئيسي (التسوية)

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main Axis Alignment Demo</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>

61 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

الفئة	قيمة 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 فيُستخدم لتوسيط المحتوى.

4. محاذاة المحاور المتقاطعة (البنود)

تتحكم فئات items-* في كيفية محاذاة عناصر «فليكس» على المحور العرضي.

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cross Axis Alignment Demo</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">Short</div>
        <div class="bg-blue-600 text-white px-4 py-6 rounded">Medium</div>
        <div class="bg-blue-700 text-white px-4 py-8 rounded">Tall</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">Short</div>
        <div class="bg-green-600 text-white px-4 py-6 rounded">Medium</div>
        <div class="bg-green-700 text-white px-4 py-8 rounded">Tall</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">Short</div>
        <div class="bg-purple-600 text-white px-4 py-6 rounded">Medium</div>
        <div class="bg-purple-700 text-white px-4 py-8 rounded">Tall</div>
      </div>
    </div>

    <!-- items-stretch -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-stretch (default)</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">Short</div>
        <div class="bg-orange-600 text-white px-4 rounded flex items-center justify-center">Medium</div>
        <div class="bg-orange-700 text-white px-4 rounded flex items-center justify-center">Tall</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">Small</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded text-2xl">Large</div>
        <div class="bg-red-700 text-white px-4 py-2 rounded text-base">Baseline</div>
      </div>
    </div>
  </div>
</body>
</html>

53 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

الفئة	قيمة 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 إلى تحقيق التوسيط الأفقي والرأسي المثالي.

5. مواءمة المحتوى (المحتوى)

تتحكم فئات content-* في توزيع عناصر «فليكس» متعددة الأسطر على طول المحور العرضي. ولا تصبح هذه الفئات سارية المفعول إلا عند تمكين flex-wrap.

▶ مثال

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Content Alignment Demo</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 مباشرةً. لا تعمل هذه الخاصية إلا في حاويات flex متعددة الأسطر.

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

6. المحاذاة الذاتية (self)

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

▶ مثال

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Self Alignment Demo</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 overriding items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">self overrides items setting</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>

    <!-- Practical application -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical application: Navbar alignment</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">Logo</div>
        <div class="flex-1 bg-green-500 text-white px-4 py-2 rounded self-start">Menu (top aligned)</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded self-center">Button (centered)</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.

7. التوسيع والتقلص في Flex

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Grow and Shrink Demo</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">Fixed</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">Fixed</div>
      </div>
    </div>

    <!-- flex-1 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-1 (commonly used)</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">Fixed</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 (prevent shrinking)</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">No shrink</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded flex-1">Can shrink</div>
      </div>
    </div>
  </div>
</body>
</html>

52 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة تحديد الحجم المرن:

الفئة	قيمة 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، بينما تجمع خاصية flex-1 في Tailwind الإعدادات الأكثر شيوعًا في فئة واحدة.

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

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

تتحكم فئات gap-* في التباعد بين عناصر «فليكس»، لتحل محل طريقة الهامش التقليدية.

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gap Spacing Demo</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 and gap-y -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-x-8 gap-y-4 (separate horizontal and vertical control)</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>

    <!-- Different gap sizes -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Different gap sizes</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>

61 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

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

9. مثال شامل

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Comprehensive Example</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">
    <!-- Navbar -->
    <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">Logo</div>
        <div class="hidden md:flex items-center gap-6">
          <a href="#" class="text-gray-600 hover:text-blue-600">Home</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">Products</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">About</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">Contact</a>
        </div>
        <button class="bg-blue-600 text-white px-4 py-2 rounded">Sign In</button>
      </div>
    </nav>

    <!-- Hero Section -->
    <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">Welcome to Flexbox</h1>
          <p class="text-blue-100 mb-6">A powerful flexible layout system for easily creating responsive pages</p>
          <div class="flex gap-4">
            <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold">Get Started</button>
            <button class="border border-white text-white px-6 py-3 rounded-lg">Learn More</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>

    <!-- Feature Cards -->
    <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">Flexible Alignment</h3>
        <p class="text-gray-600 text-sm flex-1">Supports main axis, cross axis, and self alignment modes</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">Flexible Sizing</h3>
        <p class="text-gray-600 text-sm flex-1">Intelligent space distribution via flex-grow and 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">Responsive Wrapping</h3>
        <p class="text-gray-600 text-sm flex-1">flex-wrap auto-wraps to adapt to different screen sizes</p>
      </div>
    </div>

    <!-- Footer -->
    <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 Example</div>
        <div class="flex gap-4">
          <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
          <a href="#" class="text-gray-400 hover:text-white">Terms of Use</a>
          <a href="#" class="text-gray-400 hover:text-white">Contact Us</a>
        </div>
      </div>
    </footer>
  </div>
</body>
</html>

75 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة كود CSS مكثف لشريط التنقل وقسم العنوان الرئيسي وشبكة البطاقات والتصميمات الأخرى، في حين أن Tailwind يحقق نفس النتيجة باستخدام فئات الأداة المساعدة flex مباشرةً في كود 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-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 في البطاقات لتقسيم المساحة بالتساوي
⭐⭐⭐ قم بإنشاء قسم «Hero» كامل يتضمن عنوانًا ووصفًا وأزرارًا وصورة، باستخدام flex لتصميم جنبًا إلى جنب يتحول تلقائيًا إلى الترتيب الرأسي على الأجهزة المحمولة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن