جاري التحميل...

Flex المتجاوب في CSS

درس Flex Items يضبط حجم كل ابن. Flex المتجاوب يطرح السؤال التالي: عندما يضيق عرض الشاشة، كيف يلتف ذلك الصف أو يتكدّس أو يقلب الاتجاه؟ تعلّم بضعة أنماط media-query هادئة — وحدات التصميم المتجاوب واستعلامات الوسائط العميقة تأتي لاحقاً.

صندوق أدوات flex المتجاوب

📊 نظرة سريعة على flex المتجاوب

الأداة الدور اليومي
flex-wrap ينقل العناصر إلى سطر جديد عندما يضيق الصف
flex-direction يقلب row ↔ column عند نقطة توقف لتكديس الأقسام
Media query يطبّق قاعدة flex جديدة فقط عندما يطابق العرض
flex-basis / min-width يحدّد متى تلتف البطاقات أو تبقى جنباً إلى جنب
gap يحافظ على المسافات صادقة عند التفاف الأسطر
تجنّب order للتخطيط أبقِ ترتيب DOM سليماً للوحة المفاتيح وقارئ الشاشة

ابدأ من قاعدة flex مقروءة (سطح مكتب أو mobile-first). عند نقطة توقف واضحة، غيّر فقط ما يجب تغييره — الالتفاف أو الاتجاه أو الأساس — لا كل الخاصيات دفعة واحدة.

flex-wrap — دع الصف يتنفس

عندما يجب أن تبقى البطاقات في صف على الشاشات الواسعة وتلتف بدل أن تُسحق بلا نهاية، فعّل الالتفاف وأعطِ كل بطاقة أساساً معقولاً.

Wrapping card row

css 
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.cards__item {
flex: 1 1 14rem;
min-width: 12rem;
}

قلب الاتجاه عند نقطة توقف

نمط كلاسيكي: جنباً إلى جنب على العروض الواسعة، وعمود مكدّس على الضيقة. غيّر flex-direction داخل media query — واترك نفس HTML.

Stack on small screens

css 
.shell {
display: flex;
flex-direction: row;
gap: 1.25rem;
}

@media (max-width: 40rem) {
.shell {
flex-direction: column;
}
}

الأساس وmin-width لإعادة التدفق

اربط الالتفاف بـ flex-basis أو min-width حتى تقرر العناصر متى تسقط. يمكن لنقطة توقف أيضاً إعادة ضبط الأساس إن كان حجم الما يلتف نظيفاً أبداً.

Basis at a breakpoint

css 
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.toolbar__action {
flex: 1 1 10rem;
}

@media (max-width: 36rem) {
.toolbar__action {
flex-basis: 100%;
}
}

العروض الضيقة ليست لغة تخطيط أخرى — نفس أدوات flex بقيم مختلفة. غيّر الاتجاه أو الالتفاف؛ لا تخترع شجرة HTML ثانية.

عادة flex متجاوب هادئة

نقطة توقف رئيسية واحدة أولاً. فضّل الالتفاف وقلب الاتجاه على إعادة الترتيب بـ order. أبقِ ترتيب المصدر معقولاً. اترك الصور المرنة وأنظمة نقاط التوقف المعقّدة ونظرية التصميم المتجاوب الكاملة للدروس اللاحقة.

Named stack roles

css 
.page {
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.page__main {
flex: 1 1 auto;
min-width: 0;
}

.page__rail {
flex: 0 0 16rem;
}

@media (max-width: 48rem) {
.page {
flex-direction: column;
}

.page__rail {
flex-basis: auto;
width: auto;
}
}

Min-width wrap guard

css 
.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.chips__item {
flex: 0 1 auto;
min-width: 7rem;
}

جرّب بنفسك

  1. ابنِ صف بطاقات بـ flex-wrap: wrap وflex: 1 1 14rem.
  2. اقلب الغلاف إلى flex-direction: column تحت max-width: 40rem.
  3. أجبر أزرار شريط الأدوات على flex-basis: 100% عند نقطة توقف صغيرة.
  4. أضف min-width حتى تلتف الشرائح بدل أن تُسحق.
  5. قاوِم استخدام order لـ«إصلاح» التخطيط المتجاوب.

أخطاء شائعة

  • تقليص العناصر إلى الأبد بدل الالتفاف أو التكديس
  • استخدام order كأداة تخطيط متجاوب وكسر ترتيب التبويب
  • نسيان flex-wrap ثم التساؤل لماذا لا تسقط البطاقات أبداً
  • رمي كل خاصيات flex في استعلام وسائط عملاق واحد
  • اعتبار هذا الدرس دورة التصميم المتجاوب بأكملها

خلاصة

  • flex المتجاوب يكيّف الالتفاف والاتجاه والأساس عبر العروض
  • flex-wrap مع أساس/min-width معقول يتيح للصفوف إعادة التدفق
  • استعلامات الوسائط تقلب flex-direction للتكديس على الشاشات الضيقة
  • فضّل نقاط توقف هادئة؛ تجنّب order لخدع التخطيط
  • وحدات التصميم المتجاوب واستعلامات الوسائط الأعمق تأتي لاحقاً

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 48 من 51
Css درس تعليمي