CSS

CSS Flex Responsive
تجاوب العناصر مع نظام flex box في لغة CSS

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

التاريخ

30 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1821

المواضيع

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

CSS Flex Responsive
تجاوب العناصر مع نظام flex box في لغة CSS

</> CSS Flex Responsive
تجاوب العناصر مع نظام flex box في لغة CSS

عن طريق نظام media query مع نظام flex box يمكن أن يتغير شكل صفحة الويب من صفوف إلي أعمدة وذلك عندما يتغير flex-direction: row إلي flex-direction: column داخل media query.

CSS Flex Responsive

تحويل الصفوف إلي أعمدة عن طريق media query مع نظام flex box.

@media (max-width: 800px)
{
  .flex-container
  {
    flex-direction: column;
  }
}
Resize
لا تنسي تصغير وتكبير نافذة المتصفح حتي تتمكن من رؤية التغيرات الناتجة من نظام media query مع flex box.

</> CSS Responsive Flexbox with wrap
إلتفاف العناصر داخل حاوية flex box في لغة CSS مع نظام media query

يمكن أن تلتف العناصر داخل حاوية flex box في لغة CSS مع نظام media query وذلك عندما يتم تحويل flex-wrap إلي القيمة wrap.

CSS Responsive Flexbox with wrap

إلتفاف العناصر عندما يكون العرض 800 أو أقل تظهر العناصر ملتفه وعرض العنصر يكون 100%.

@media (max-width: 800px) 
{
  .item
  {
    flex:100%;
  }
}

</> CSS responsive image gallery using flexbox
عارض الصور متجاوب بنظام flexbox في لغة CSS

عارض صور متجاوب مع نظام flex ونظام media query في لغة CSS.
CSS responsive image gallery using flexbox

عارض صور متجاوب مع نظام flex ونظام media query في لغة CSS.

@media (max-width: 800px) 
{
  .column {
    flex: 50%;
    max-width: 50%;
  }
}
مصطلحات الدرس
Responsive
Responsive

متجاوب

Orientation
Orientation

توجيه

Orientation
Orientation

اتجاه

Row
Row

صف

Column
Column

عامود

Wrap
Wrap

لف / كسر

Container
Container

حاوية المحتوي

Image
Image

صورة

Website
Website

موقع إنترنت

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.