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

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

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

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

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.

HTML 
@media (max-width: 800px)
{
  .flex-container
  {
    flex-direction: column;
  }
}
جرّب بنفسك

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%.

HTML 
@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.

HTML 
@media (max-width: 800px) 
{
  .column {
    flex: 50%;
    max-width: 50%;
  }
}
جرّب بنفسك

مشاركة

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

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

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

المصطلحات10

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

0 / 10 مفهومةأول بطاقة، أول خطوة
01 Responsive متجاوب
للمراجعة
02 Orientation توجيه
للمراجعة
03 Row صف
للمراجعة
04 Column عامود
للمراجعة
05 Specific حدد
للمراجعة
06 Wrap لف / كسر
للمراجعة
07 Container حاوية المحتوي
للمراجعة
08 Image صورة
للمراجعة
09 Website موقع إنترنت
للمراجعة
10 Flexible مرن
للمراجعة

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

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

الاختصارات2

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

0 / 2 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة

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

مساحة التحدي

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

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

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

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

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

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

.............. هو عملية استجابة الموقع الخاصة بك من سلوك وشكل إلى التغير فى مقاس الشاشة الذى يعرضه او الدوران orientation للموبيل و التابلت بمعنى اخر فنفس تصميم الموقع يظهر بصورة مناسبة على كل جهاز سواء كمبيوتر مكتبى او لابتوب او تابلت او موبايل

02

يمكننا تغيير النسبة المئوية للخاصية flex للعناصر flex لإنشاء تخطيطات مختلفة لأحجام شاشات

03

هل يمكننا استخدام ال flexbox مع الصور ؟