CSS

CSS Flexbox
الصناديق المرنة - فليكس بوكس في لغة CSS

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

التاريخ

24 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

6927

المواضيع

24
الشروحات chevron_left CSS Flexbox chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Flexbox
الصناديق المرنة - فليكس بوكس في لغة CSS

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> CSS Flexbox
الصناديق المرنة - فليكس بوكس في لغة CSS

flex box الصناديق المرنة - فليكس بوكس في لغة CSS هي من أكثر أنظمة بناء صفحات الويب شهرة وهو من أسهل الأنظمة ايضاً حيث يمكنك التحكم بطريقة بسيطة جداً في تسقيم صفحة الويب وتكون مرنة ومتجاوبة مع جميع الأجهزة.


responsive web page تجاوب الصفحات مع جميع الأجهزة:

ويعني ذلك أن صفحة الويب تتلائم مع جميع الأجهزة أي كان حجم هذا الجهاز ففي أجهزة الكمبيوتر يظهر الصف مثلاً به 12 صندوق وعلي أجهزة الهواتف يظهر الصف به صندوق واحد أو صندوقين أو ثلاث صناديق فقط نظراً لعدم وجود مساحة كافية وباقي الصناديق يتم توزيعها بشكل تلقائي علي صفوف أخري وعلي أجهزة التابلت يظهر 6 صناديق فقط ويمكن التحكم في عدد الصناديق التي تعرض عن طريق نظام flex box في لغة CSS.


معلومات حول نظام flex box:

  • يستخدم نظام flex box بدون نظام float في لغة CSS إلا في بعض الحالات النادرة.
  • يستخدم نظام flex box بدون نظام position في لغة CSS إلا في بعض الحالات النادرة.
  • يعد تقسيم الصفحات بواسطة بنظام flex box أفضل من نظام float و نظام position في لغة CSS.
  • نظام flex box يأتي علي هيئة container حاوية بداخلها items عناصر.
  • يمكن أن تكون الحوايات nested container متداخلة مع نظام flex box.
  • يمكن أن يكون item العنصر هو أب أو حاوية لعناصر أخري مع نظام flex box.
  • بواسطة flex box يمكن أن تتمدد العناصر بداخل الحاوية لصفوف أخري ويمكن أن تكون في نفس الصف.
  • نظام flex هو أحدي القيم التي تكون تابعة لخاصية display:flex في لغة CSS.
  • يوجد مجموعة خصائص مساعدة لخاصية display:flex في لغة CSS.
flex wrap

قم بتصغير الصفحة حتي تشاهد تمدد العناصر أو التفافها الي صفوف اخري.

flex no wrap

قم بتصغير الصفحة حتي تشاهد عدم تمدد العناصر أو التفافها الي صفوف اخري.

</> CSS Flex Container
حاوية flex box في لغة CSS

flex box container حاوية الفليكس بوكس هي عبارة عن div أو أي عنصر أخر يحتوي علي عناصر داخلية ففي هذة الحالة يطلق عليه flex container بشرط أن تكون طريقة عرضة هي display:flex في لغة CSS.

CSS Create Flex Container

يتم إنشاء flex container عن طريق إضافة display:flex ولكي يظهر flex container علي المتصفح يجب أن يكون له عرض وطول وخلفية لون في لغة CSS.

CSS Create Flex Container

يتم إنشاء flex container عن طريق إضافة display:flex ولكي يظهر flex container علي المتصفح يجب أن يكون له عرض وطول وخلفية لون في لغة CSS.

.flex-container
{
  display: flex;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
  height:100px;
}

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

في لغة 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.

</> CSS Flex items
عناصر حاوية flex box في لغة CSS

CSS Flex items العناصر الداخلية لحاوية الفليكس بوكس تسمي flex items وهي خاضعة لجميع خصائص الحاوية وفي لغة CSS لهذة العناصر مجموعة خصائص سنتعرف عليها في الدروس المقبلة.

CSS Create Flex Items

قم بإزالة خاصية height من flex container لكي يتمدد علي حسب المحتوي الداخلي.

CSS Create Flex Items

قم بإزالة خاصية height من flex container لكي يتمدد علي حسب المحتوي الداخلي.

.item
{
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات