نوفمبر 15, 2022تطبيق اذكار الصباح والمساء

Flex

عبارة عن طريقة عرض تقوم بتنسيق المحتوى بالاعتماد على الاب والذي يسمى الحاوي والابناء والذي تم تسميتهم بالعناصر
لاستخدام ال flex يجب تحديد تاج الاب وبداخله الابناء.

الخصائص الخاصة ب تاج الاب :

1- display:flex: هذه الخاصية تعمل على

اذا كان flex-direction =row  ولم يتم ضبط طول وعرض العنصر من قبل المستخدم

• ترتيب عناصر الحاوية (الاب) بجانب بعض (row).
• تجعل عناصر الحاوية (الاب) بعرض مناسب مع محتوى العناصر.
• يتم ضبط طول العناصر بطول الاب
• اذا تجاوز النص مساحة الشاشة لاتنزل سطر اخر وانما يواصل المسير باتجاه العرض
• اذا تجاوز النص عرض الاب فالعنصر سوف يخرج عن نطاق عرض الاب
• لا تخصص عرض متساوي لجميع العناصر(بالاعتماد على المحتوى نفسه).

اذا كان flex-direction =column  ولم يتم ضبط طول وعرض العنصر من قبل المستخدم

• ترتيب عناصر الحاوية (الاب) فوق بعض (column).
• تجعل عناصر الحاوية (الاب) بطول مشابه لطول محتوى العناصر.
• يتم ضبط عرض العناصر بعرض الاب.
• اذا تجاوز النص مساحة الشاشة تنزل سطر اخر و يواصل المسير باتجاه الطول لاسفل.
• اذا تجاوز النص طول الاب فالعنصر سوف يخرج عن نطاق طول الاب.
• اذا كان محتوى العناصر قابل للتجزئة (نصوص) فطول وعرض العنصر يتم زيادته ونقصانه اعتمادا على حجم الشاشة (كلما كانت الشاشة اصغر حجما فطول العنصر يزداد حجما بينما عرضه يقل).
• اذا كان المحتوى غير قابل للتجزئة (صورة) فسوف يتم حجز طول وعرض مناسب مع الصورة (كلما كانت الشاشة اصغر حجما من المحتوى فالمحتوى سوف يتم اخفاء جزء منه).

2- justify-content: هذه الخاصية تعمل على

• تعمل على وضع العناصر في موضع معين (يمين(flex-end) – وسط(center) – يسار(flex-start)) اذا كانت الخاصية flex-direction تساوي (row)
• تعمل على وضع العناصر في موضع معين (تحت(flex-end) – وسط(center) – اعلى(flex-start)) اذا كانت الخاصية flex-direction تساوي (column)
• هذه الخاصية لايمكنك ان تراها الا اذا كانت المساحة الكلية للابناء اصغر من مساحة الاب

3-flex-direction: هذه الخاصية تعمل على

• اما بجانب بعض(row) (عرض العناصر مشابه لعرض الاب(الحاوي)).
• او فوق بعض(column) (طول العناصر مشابه لطول الاب(الحاوي)).

4- align-items: تعمل على محاذاة العناصر.

 

الفرق بين align-items و justify-content

Align-items

اذا كان flex-direction =row ولم يتم ضبط طول وعرض العنصر من قبل المستخدم

• تعمل على ضبط طول وعرض العنصر ملائم للمحتوى
• تضع العنصر فوق (start) او في الوسط(center) او تحت (end)
• اذا كان flex-direction =column ولم يتم ضبط طول وعرض العنصر من قبل المستخدم
• تعمل على ضبط طول وعرض العنصر ملائم للمحتوى
• تضع العنصر في اليسار (start) او في الوسط(center) او في اليمين  (end)

justify-content

اذا كان flex-direction =row ولم يتم ضبط طول وعرض العنصر من قبل المستخدم

• تأخذ الطول الافتراضي للاب او الذي عينه المستخدم للعناصر.
• تعمل على ضبط عرض العنصر ملائم للمحتوى
• تضع العنصر في اليسار (start) او في الوسط(center) او في اليمين (end)
• اذا كان flex-direction =column ولم يتم ضبط طول وعرض العنصر من قبل المستخدم
• تأخذ العرض الافتراضي للاب او الذي عينه المستخدم للعناصر.
• تعمل على ضبط طول العنصر ملائم للمحتوى.
• تضع العنصر فوق (start) او في الوسط(center) او تحت (end)