سؤال محير بخصوص الflexbox

إمكانيات وخصائص Flexbox ممتازة لعمل تصاميم متجاوبة مع جميع الشاشات Responsive ولكنها ليست كاملة أي أن هناك الكثير من الإحتمالات والتصاميم التي تحتاج إلى إستعمال عناصر أخرى مثل Grid System أو Media Query وبدون هذه الخصائص لن يفيد الـ Flexbox كثيرًا، لذلك تعلم كل هذه الخصائص معًا يعطي للمبرمج إمكانيات أكثر وتحكم أكبر في كيفية ظهور الموقع على كل الشاشات بجميع أحجامها.

على سبيل المثال، ربما تحتاج إلى أن تخفي شريط التنفقل navbar على الشاشات الصغيرة، وفي هذه الحالة لن يفيد إستعمال Flexbox ويجب أن تستعمل media query لإضافة الخاصية display، كالتالي :

@media screen and (max-width: 360px) {
  .navbar {
    display: none;
  }
}

هنا بعض المصادر والمقالات التي ستفيدك في تعلم كيفية إستخدام كطل هذه الخواص:

Flexbox:

• تعرف على CSS Flexbox وأساسيات استعماله لهيكلة صفحات الويب - CSS - أكاديمية حسوب (hsoub.com)
• أساسيات Flexbox في CSS مع أمثلة عملية - CSS - أكاديمية حسوب (hsoub.com)
• الخاصية flex - موسوعة حسوب (hsoub.com) https://wiki.hsoub.com/CSS/...

Grid System:

• الخاصية grid - موسوعة حسوب (hsoub.com) https://wiki.hsoub.com/CSS/...
• مدخل إلى شبكات CSS العصرية (CSS Grids) - CSS - أكاديمية حسوب (hsoub.com)
• مفاهيم أساسية في التعامل مع تخطيط الشبكة Grid Layout - CSS - أكاديمية حسوب (hsoub.com)

Media Query:

• استعلامات الوسائط (Media Queries) في CSS - CSS - أكاديمية حسوب (hsoub.com) https://academy.hsoub.com/p...
• القاعدة ‎@media - موسوعة حسوب (hsoub.com) https://wiki.hsoub.com/CSS/...