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

الترتيب والنمو المخصص (Flex Grow, Shrink & Order)

أهداف الدرس

التحكم في استغلال المساحات المتبقية بـ grow و shrink.
إعادة ترتيب ظهور العناصر بـ order-first و order-last و order-*.
استخدام الأوزان المخصصة مثل grow-[2] لتوزيع المساحات بنسب.
منع تقلص العنصر بـ shrink-0 لحماية المحتوى الثابت.

1. المرونة المتقدمة للعناصر

يسمح لك كلاس grow بجعل العنصر يتمدد تلقائياً لملء المساحات الفارغة داخل الصف، مما يوفّر مرونة شديدة عند تغيّر أبعاد الشاشات.

html

<!-- العنصر الأوسط ينمو لملء الفراغ -->
<div class="flex gap-4">
  <div>ثابت</div>
  <div class="grow">ينمو</div>
</div>

<!-- توزيع النسب: الأول 1x والثاني 2x -->
<div class="flex gap-4">
  <div class="grow">1x</div>
  <div class="grow-[2]">2x</div>
</div>

<!-- إعادة الترتيب -->
<div class="flex gap-4">
  <div class="order-last">آخر</div>
  <div>وسط</div>
  <div class="order-first">أول</div>
</div>

<!-- حماية العنصر من التقلص -->
<div class="flex gap-4">
  <div class="shrink-0">لا يتقلص</div>
  <div class="grow">يأخذ المساحة المتبقية</div>
</div>

2. مرجع كلاسات Flex Grow/Shrink/Order

Grow (النمو)

grow-0 — لا ينمو (افتراضي)
grow — ينمو بحصة 1x
grow-[2] — ينمو بحصة 2x
grow-[3] — ينمو بحصة 3x

Shrink (التقلص)

shrink — يتقلص (افتراضي)
shrink-0 — لا يتقلص أبداً
shrink-[2] — يتقلص بحصة 2x

Order (الترتيب)

order-first — الأول دائماً
order-last — الأخير دائماً
order-1 ... order-12 — مرقّم
order-none — الترتيب الأصلي

حالات الاستخدام

شريط بحث في navbar
توزيع الأعمدة الرئيسية/الجانبية
إعادة الترتيب على الجوال
حماية عناصر navigation

3. أمثلة عملية على Grow و Order

شريط بحث مرن

نموذج البحث في الهيدر يأخذ كل المساحة المتبقية بينما الأزرار محافظة على حجمها.

التجاوب بالترتيب

على الجوال، يكون العنوان في الأعلى بـ order-first والصورة في الأسفل بـ order-last.

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

تحدي الدرس الرابع: إتقان Grow و Order و Shrink

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

غلّف الكل في حاوية <div class="space-y-6 p-4">.
احتفظ بالمثال الأساسي (grow) كما هو في الأعلى.
أضف قسماً بثلاثة عناصر: grow + ثابت + grow.
أضف قسماً بأوزان مختلفة: grow و grow-[2].
أضف قسماً بثلاثة عناصر مرتّبة: order-last + عادي + order-first grow.
أضف قسماً بـ shrink-0 لحماية عنصر ثابت مع نص طويل يتقلص.

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

الدرس السابق الانتقال للمستوى الثالث