اقرأ في هذا المقال
- ماهو CSS Flexbox وما هي أهم الدوال التي تستخدم معه
- ما هي أهم الدوال التي تستخدم مع Flexbox في لغة البرمجة CSS
ماهو CSS Flexbox وما هي أهم الدوال التي تستخدم معه
يعتبر (Flexbox) واحد من أهم مزايا لغة البرمجة (CSS)، وهو عبارة عن طريقة وأداة تخطيط أحادية البعد والتي تُستخدم في عملية تخطيط العناصر ضمن صفوف أو أعمدة، وتسمح هذه الأداة بالقيام بالمجموعة من الوظائف المختلفة مثل: ترتيب مجموعة من العناصر في سطر واحد بدون تحديد عرض كل واحد منها، وكما تسمح هذه الأداة بإجراء محاذاة للعناصر إلى اليمين أو اليسار أو الوسط دون التعديل على الكود البرمجي المكتوب بلغة البرمجة (HTML)، وهناك العديد من الدوال التي تستخدم مع (Flex box).
ما هي أهم الدوال التي تستخدم مع Flexbox في لغة البرمجة CSS
إن (Flexbox) لا يحتوي فقط على خاصية أو دالة واحدة فقط بل يتضمن مجموعة من الخواص والدوال المختلفة والتي تنفذ مجموعة من المهام والوظائف، والجدول التالي يحتوي على أهم الدوال التي تستخدم مع (Flex Box):
| الدالة | الاستخدام |
| align -items | تقوم هذه الدالة بتعريف طريقة توزيع المتصفح للمسافة التي تظهر بين العناصر وحولها، حيث أنها تعمل كالخاصية (justify – content) ولكن في الاتجاه العمودي. |
| align -content | تقوم هذه الدالة بتعريف طريقة توزيع المتصفح للمسافة بين العناصر المختلفة. |
| flex- direction | تقوم هذه الدالة بتحديد ما هو المحور الرئيسي (main axis) وما هو اتجاهه. |
| flex – Grow | تستخدم هذه الدالة في تحديد ما هي المساحة التي يجب أن يأخذها العنصر داخل ال ( flexbox). |
| flex -shrink | تستخدم هذه الدالة في تحديد ما هي المساحة التي يجب أن يأخذها العنصر داخل ال (flexbox) وذلك نسبة إلى باقي العناصر الموجودة. |
| order | تقوم هذه الدالة بترتيب العناصر الخاصة ب (flex)، حيث سيتم ترتيبها بشكل تصاعدي، وذلك حسب قيمة الخاصية (order). |
| flex- wrap | تستخدم هذه الدالة في عملية تحديد إذا كانت العناصر يجب أن تكون موجودة في سطر واحد أم يمكن أن تكون موجودة علة سطور مختلفة. |
| flex -basis | تستخدم هذه الدالة لضبط قياس صندوق المحتوى (content box). |
| flex- end | تقوم هذه الدالة بمحاذاة نهاية كل عنصر عند نهاية المحور الجانبي الخاص به. |
| flex-start/ baseline | تقوم هذه الدالة بمحاذاة أعلى نقطة من كل عنصر عند بداية المحور الجانبي. |
