يوفر Tailwind Flex طريقة فعالة لإنشاء تخطيطات سريعة الاستجابة دون كتابة CSS معقدة. باستخدام أدوات مساعدة بسيطة مثل flex وflex-row وflex-col وما إلى ذلك، يمكنك محاذاة العناصر وترتيبها بسهولة. يعد Tailwind Flex مثاليًا للمطورين الذين يتطلعون إلى تبسيط إنشاء التخطيط مع الحفاظ على التحكم الكامل في المحاذاة والاتجاه والتباعد — كل ذلك بأقل قدر من التعليمات البرمجية.

فهم الحاوية المرنة في Tailwind Flex

يبدأ أساس استخدام Tailwind Flex بمفهوم الحاوية المرنة. لجعل أي عنصر حاوية مرنة، ما عليك سوى إضافة الفئة flex إليه. على سبيل المثال:

من خلال القيام بذلك، يمكنك تحويل div إلى حاوية مرنة، والتي تعمل بمثابة العنصر الأصلي. أي عناصر موضوعة داخل هذه الحاوية تصبح عناصر مرنة تلقائيًا. يعد هذا أمرًا بالغ الأهمية لأن هذه العناصر المرنة ستستجيب الآن للخصائص المرنة المختلفة التي تطبقها على الحاوية أو على نفسها.

فهم الأساس المرن

يسمح لك Flex Basis بالتحكم في الحجم الأولي للعناصر المرنة قبل توزيع المساحة المتبقية. باستخدام Tailwind، يمكنك ضبط ذلك بسهولة باستخدام الأدوات المساعدة الأساسية* لتحديد مقدار المساحة التي يجب أن يشغلها كل عنصر مرن في البداية.

خذ بعين الاعتبار المثال التالي:

  
01
  
02
  
03

في هذا المقتطف، لدينا حاوية مرنة تحتوي على ثلاثة عناصر فرعية. تم تعيين العنصرين الأولين (01 و 02) على أساس 1/4، مما يعني أن كل منهما سيأخذ في البداية ربع عرض الحاوية. العنصر الثالث (03) له أساس -1/2 مما يجعله يشغل نصف الحاوية.

باستخدام الأدوات المساعدة الأساسية*، يمكنك التحكم بسهولة في كيفية توزيع العناصر المرنة داخل الحاوية، مما يسمح لك بإنشاء تخطيطات مرنة ومتوازنة بصريًا.

فهم الاتجاه المرن: الصف والعمود

عند العمل مع Tailwind Flex، يشير الاتجاه إلى كيفية ترتيب العناصر داخل الحاوية المرنة. يوفر Tailwind أدوات مساعدة بسيطة لهذا الغرض، مما يسمح لك بتحديد ما إذا كان يجب وضع العناصر في صف أو عمود، وحتى عكس اتجاهها إذا لزم الأمر.

صف

لوضع العناصر المرنة أفقيًا، استخدم الأداة المساعدة للصف المرن. سيؤدي هذا إلى محاذاة العناصر من اليسار إلى اليمين، تمامًا مثلما تتم قراءة النص عادةً:

  
01
  
02
  
03

تم عكس الصف

إذا كنت بحاجة إلى وضع العناصر المرنة أفقيًا في الاتجاه المعاكس - من اليمين إلى اليسار - فاستخدم الصف المرن العكسي:

  
01
  
02
  
03

عمود

لوضع العناصر المرنة عموديًا، استخدم الأداة المساعدة flex-col. وهذا يجعل العناصر مكدسة من الأعلى إلى الأسفل:

  
01
  
02
  
03

العمود معكوس

إذا كنت تريد تكديس العناصر عموديًا في الاتجاه المعاكس - من الأسفل إلى الأعلى - فاستخدم flex-col-reverse:

  
01
  
02
  
03

فهم فليكس التفاف

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

لا تلتف

لمنع التفاف العناصر المرنة، استخدم الأداة المساعدة flex-nowrap. يؤدي هذا إلى بقاء كافة العناصر في سطر واحد، حتى لو تسبب في تجاوز بعض العناصر خارج الحاوية:

  
01
  
02
  
03

التفاف بشكل طبيعي

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

  
01
  
02
  
03

التفاف معكوس

لالتفاف العناصر المرنة في الاتجاه العكسي، استخدم flex-wrap-reverse. وهذا يعني أن العناصر سوف تلتف إلى السطر التالي، ولكن في الاتجاه المعاكس:

  
01
  
02
  
03

فهم النمو المرن والانكماش

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

أولي

تتيح الأداة المساعدة الأولية المرنة للعنصر المرن أن يتقلص ولكن لا ينمو، مع احترام حجمه الأولي. يكون هذا مفيدًا عندما تريد تقليل حجم العناصر إذا لزم الأمر، ولكن دون توسيعها:

  
01
  
02
  
03

في هذا المثال، يمكن أن يتقلص العنصران 02 و03 إذا لزم الأمر، لكنهما لن يتجاوزا حجمهما الأولي.

فليكس 1

للسماح للعنصر المرن بالنمو والانكماش بحرية، مع تجاهل حجمه الأولي، استخدم الأداة المساعدة flex-1. وهذا يجعل العنصر مرنًا في الاستجابة لمساحة الحاوية:

  
01
  
02
  
03

في هذا المثال، سيتم توسيع أو تقليص العنصرين 02 و03 لملء المساحة المتوفرة، مما يجعل التخطيط سريع الاستجابة وقابلاً للتكيف.

آلي

تتيح الأداة المساعدة flex-auto للعنصر المرن أن ينمو ويتقلص مع الأخذ في الاعتبار حجمه الأولي. وهذا يعني أن العناصر ستقوم بتعديل حجمها بناءً على المساحة المتوفرة ولكنها ستظل تعطي الأولوية لأبعادها الأصلية:

  
01
  
02
  
03

في هذا الإعداد، يكبر العنصران 02 و03 أو يتقلصان ليناسب المساحة المتوفرة مع الاحتفاظ بالتركيز على العرض الأولي.

لا أحد

لمنع العنصر المرن من النمو أو الانكماش، استخدم الأداة المساعدة flex-none. وهذا يضمن أن يحتفظ العنصر بحجمه المحدد بغض النظر عن المساحة المتوفرة:

  
01
  
02
  
03

هنا يحتفظ العنصران 01 و02 بأحجامهما دون أن ينموا أو يتقلصا، بينما يتم تعديل العنصر 03 لملء المساحة المتوفرة.

فليكس تنمو

تسمح لك الأدوات المساعدة Flex Grow بالتحكم في ما إذا كانت العناصر المرنة ستنمو لملء المساحة المتاحة ومقدار ذلك.

ينمو

للسماح لعنصر مرن بالنمو وملء أي مساحة متاحة، استخدم أداة النمو:

  
01
  
02
  
03

في هذا المثال، يكبر العنصر 02 ليشغل أي مساحة متاحة بين العنصرين 01 و03، اللذين لهما أحجام ثابتة.

لا تنمو

لمنع العنصر المرن من النمو، استخدم الأداة المساعدة Grow-0:

  
01
  
02
  
03

هنا، لا ينمو العنصر 02 ويحافظ على حجمه الأولي، بينما ينمو العنصران 01 و03 لملء المساحة المتبقية.

فليكس يتقلص

تسمح لك الأدوات المساعدة Flex Shrink بالتحكم في ما إذا كانت العناصر المرنة ستتقلص ومقدارها عندما لا تكون هناك مساحة كافية.

يتقلص

للسماح لعنصر مرن بالانكماش حسب الحاجة، استخدم أداة التقليص:

  
01
  
02
  
03

هنا، لا يتقلص العنصر 02 ويحتفظ بعرضه، بينما يمكن للعنصرين 01 و03 أن يتقلصا أو يتوسعا حسب الحاجة.

خاتمة

تُعد Tailwind Flex أداة أساسية لإنشاء تخطيطات سريعة الاستجابة ومرنة بسهولة. من خلال استخدام فئات الأدوات المساعدة البسيطة مثل flex-row، وflex-col، وflex-wrap، وflex-initial، يمكنك التحكم في محاذاة العناصر المرنة واتجاهها وتغليفها وحجمها دون كتابة CSS معقدة. يوفر نهج المنفعة أولاً الوقت ويسمح بالتخصيص السهل، مما يجعل تطوير الويب أسرع وأكثر سهولة. لمزيد من التفاصيل، راجع وثائق Tailwind الرسمية.