انتقل إلى محتوى الدرس

CSS flex container properties جميع خصائص حاوية flex في لغة CSS

ستتعلم في هذا الدرس نظام بناء صفحات الويب بنظام flex box الصناديق المرنة - فليكس بوكس وهي من الأنظمة الأكثر مرونة, وهو نظام حديث لتقسم صفحات الويب ليجعلها متجاوبه مع جميع الاجهزة.

1 صفوف تعليمية
لغة CSS
10,507 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في لغة CSS مجموعة عناصر مساعدة لحاوية flex حتي نتحكم بشكل كامل في العناصر الداخلية أو في الحاوية.


الخصائص التي تستخدم مع flex container:

  • flex-direction للتحكم في طريقة عرض flex container بشكل أفقي أو رأسي.
  • flex-wrap للتحكم في إلتفاف العناصر في صفوف جديدة في حال عدم وجود مساحه لهم.
  • flex-flow لكتابة قمية خاصية flex-direction وخاصية flex-wrap في خاصية واحدة.
  • justify-content للتحكم في العناصر الداخلية بشكل أفقي أن تكون في الوسط أو علي اليسار أو علي الجانب الأيمن.
  • align-items للتحكم في العناصر بشكل رأسي أن تكون في المنتصف أو علي بالأسفل أو بلأعلي.
  • align-content لعمل مساحات حول العناصر أو بينها حتي لا تكون العناصر قريبة من بعضها.

flex row

عرض الحاوية كصف في لغة CSS.

Flex column

عرض الحاوية كعمود في لغة CSS.