الدرس 4 من 8
استعلام الحاوية
- 14 دقيقة
- 4 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
المكوّن يقيس نفسه
01
الشرح
@media يسأل عن عرض الشاشة. لكن البطاقة الواحدة قد تظهر في عمود ضيّق وفي عرض كامل في الصفحة نفسها — والشاشة لا تعرف الفرق.
@container يسأل عن عرض الحاوية. تعلن الحاوية بـ container-type: inline-size، ثم تكتب قواعد تسري بحسب عرضها هي.
هذه نقلة حقيقية: المكوّن يصير مستقلًّا عن مكانه، فتكتبه مرة وتضعه حيث شئت.
02
المطلوب
اجعل .wrap حاوية، واجعل .card تصير صفًّا (flex) حين يتجاوز عرض الحاوية 380 بكسل.
معايير التصحيح
4 معايير- .wrap معلَنة حاوية
- توجد قاعدة @container
- البطاقة صارت صفًّا عند العرض الواسع
- تضيق الحاوية فيرجع التكديس