الدرس 4 من 8

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

هدف الدرس

المكوّن يقيس نفسه

01

الشرح

@media يسأل عن عرض الشاشة. لكن البطاقة الواحدة قد تظهر في عمود ضيّق وفي عرض كامل في الصفحة نفسها — والشاشة لا تعرف الفرق.

@container يسأل عن عرض الحاوية. تعلن الحاوية بـ container-type: inline-size، ثم تكتب قواعد تسري بحسب عرضها هي.

هذه نقلة حقيقية: المكوّن يصير مستقلًّا عن مكانه، فتكتبه مرة وتضعه حيث شئت.

02

المطلوب

اجعل .wrap حاوية، واجعل .card تصير صفًّا (flex) حين يتجاوز عرض الحاوية 380 بكسل.

معايير التصحيح

4 معايير
  1. .wrap معلَنة حاوية
  2. توجد قاعدة @container
  3. البطاقة صارت صفًّا عند العرض الواسع
  4. تضيق الحاوية فيرجع التكديس
index.html
المعاينة
index.html100%
–/4

اضغط «تشغيل» ليبدأ الفحص.

4 معايير في بطاقة «المطلوب».