Flexbox أو Flex container هو تخطيط يمكّن المستخدمين من محاذاة العناصر وتوزيعها داخل الحاوية. تقدم Tailwind CSS فئات أدوات مساعدة متنوعة لإنشاء flexbox والعمل معه. الحاوية المرنة على مستوى الصندوق هي حاوية مرنة تتصرف / تعمل كعنصر على مستوى الكتلة وتقوم بإنشاء كتلة. يأخذ العرض الكامل للعنصر الأصل ويصنع سطرًا جديدًا بعد نفسه.
ستجسد عملية الكتابة هذه طريقة إنشاء حاوية مرنة على مستوى الكتلة في Tailwind.
كيفية إنشاء / إنشاء حاوية Flex بمستوى Block-Level في Tailwind؟
لإنشاء حاوية مرنة معينة على مستوى الكتلة في Tailwind ، أنشئ بنية HTML. ثم أضف ' ثني 'فئة المرافق مع
بناء الجملة
< شعبة فصل = 'ثني ...' >
...
شعبة >
شفرة
< جسم >
< شعبة فصل = 'فجوة مرنة-2 م-2 حد-2 حد-أسود' >
< شعبة فصل = 'bg-yellow-500 p-4' > البند الأول شعبة >
< شعبة فصل = 'bg-yellow-500 p-4' > العنصر الثاني شعبة >
< شعبة فصل = 'bg-yellow-500 p-4' > البند الثالث شعبة >
شعبة >
جسم >
هنا ، في الحاوية الرئيسية
-
- ' ثني يتم استخدام فئة 'لإنشاء حاوية مرنة على مستوى الكتلة.
- ' فجوة 2 'class تضيف وحدتين من التباعد بين العناصر الفرعية لـ flex.
- ' م -2 'فئة تضيف وحدتين من الهامش لجميع جوانب الحاوية.
- ' الحدود 2 'فئة تضيف الحد إلى الحاوية بعرض وحدتين.
- ' الحدود السوداء 'فئة تحدد لون الحدود إلى الأسود.
في عناصر الطفل المرن:
-
- ' bg-yellow-500 'فئة تطبيق اللون الأصفر على خلفية العنصر المرن.
- ' ص 4 'فئة تضيف حشوة 4 وحدات لجميع جوانب العناصر المرنة.
انتاج |
في الإخراج أعلاه ، يمثل الحد أن الحاوية عبارة عن حاوية مرنة على مستوى الكتلة ، والتي تشغل العرض الكامل لعنصرها الأصلي (المستعرض).
بدلاً من ذلك ، يمكن للمستخدم التأكد من ذلك عن طريق فحص عنصر الحاوية المرنة على صفحة الويب:
يشير الإخراج أعلاه إلى أن الحاوية عبارة عن حاوية مرنة على مستوى الكتلة.
خاتمة:
لإنشاء حاوية مرنة على مستوى الكتلة في Tailwind ، يلزم إضافة ' ثني 'فئة المنفعة مع الحاوية الخاصة وتحديد العناصر التابعة لها. يمكن للمستخدمين تحديد وتعديل العناصر المرنة وفقًا لاحتياجاتهم. للتحقق ، أضف الحدود إلى الحاوية واعرض صفحة الويب أو افحص هذا العنصر على صفحة الويب. توضح هذه المقالة طريقة إنشاء حاوية مرنة على مستوى الكتلة في Tailwind.