انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 71
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
2
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
10,418
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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.

HTML 
.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 لكي يتمدد علي حسب المحتوي الداخلي.

HTML 
.item
{
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات33

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 33 مفهومةأول بطاقة، أول خطوة
01 Flex مرن
للمراجعة
02 Box صندوق
للمراجعة
03 Layout تخطيط
للمراجعة
04 Module وحدة
للمراجعة
05 Position موقع / وضعية
للمراجعة
06 Float عائم
للمراجعة
07 Block كتلة
للمراجعة
08 Inline مضمن
للمراجعة
09 Table جدول
للمراجعة
10 Section قسم أو جزء
للمراجعة
11 Container حاوية المحتوي
للمراجعة
12 Items عناصر
للمراجعة
13 Display شاشة
للمراجعة
14 Properties خصائص
للمراجعة
15 Direction اتجاه
للمراجعة
16 Wrap لف / كسر
للمراجعة
17 Flow تدفق
للمراجعة
18 justify تبرير
للمراجعة
19 Content محتوي
للمراجعة
20 Align محاذاة
للمراجعة
21 Column عامود
للمراجعة
22 Property خاصية
للمراجعة
23 Reverse عكسي
للمراجعة
24 Row صف
للمراجعة
25 Center في المنتصف
للمراجعة
26 Start بداية
للمراجعة
27 End النهاية
للمراجعة
28 Space مسافة / تباعد
للمراجعة
29 Around حول
للمراجعة
30 Between بين
للمراجعة
31 Stretch تمدد
للمراجعة
32 Baseline حدود
للمراجعة
33 Perfect أفضل
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

4أسئلة 3أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي4 أسئلة تنتظرك
01

ال Flexible Box يجعل تصميم صفحات الويب اسهل ويجعلها اكثر مرونة وصفحات متجاوبة مع جميع الاجهزه بدون استخدام ال float او positioning.

02

الخاصية ............ تستخدم لعرض ال flex items بشكل رأسي.

03

الخاصية ......................... تستخدم لعرض ال flex items بشكل رأسي ولكن تعرض ال items بشكل عكسي من اسفل لأعلي.

04

خاصية ................. هي خاصية مختصرة لإعداد كل من flex-direction وال flex-wrap

____