24. وحدات أخرى: الوقت والزوايا والـ Flex

CSS لا يتعلق بالأبعاد فقط؛ بل يتحكم أيضاً في الوقت للرسوم المتحركة والأحجام النسبية للتخطيطات الحديثة.

وحدات الوقت

تُستخدم للانتقالات والرسوم المتحركة لتحديد المدة والتأخير.

1. ثواني (s)
2. ملي ثانية (ms) (1000ms = 1s)

css .animated-button { /* مدة الانتقال هي 0.3 ثانية */ transition-duration: 0.3s; }

.fast-animation { animation-duration: 500ms; }

وحدات الزوايا

تُستخدم للتدوير (transform: rotate())، والتدرجات، وخصائص الاتجاه الأخرى.

1. درجات (deg)

css .rotated-box { transform: rotate(45deg); /* يدور الصندوق 45 درجة باتجاه عقارب الساعة */ }

وحدة الكسور (fr) - CSS Grid

وحدات الكسور حصرية لتخطيط CSS Grid (الدرس 66+). تحدد fr كسرًا من المساحة الحرة المتاحة في حاوية الشبكة.

css /* يحدد ثلاثة أعمدة: الأول يأخذ وحدة واحدة من المساحة، والثاني وحدتين، والثالث وحدة واحدة. */ .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; }

/* سيكون العمود الأوسط ضعف عرض الأعمدة الخارجية. */