تحديد الموضع الصحيح للنص في التذييل المرن باستخدام الخصائص المرنة

عند محاولة محاذاة النص إلى اليمين داخل حاوية مرنة باستخدام الخاصية العائمة ، قد تواجه مشكلات. وذلك لأن الخاصية float غير مدعومة داخل الحاويات المرنة.

وفقًا لمواصفات flexbox، "لا يؤدي الطفو والمسح إلى إنشاء عنصر عائم أو مسح للعنصر المرن، ولا يخرجه عن التدفق. " بدلاً من ذلك، يقوم بإنشاء "سياق تنسيق مرن" جديد لمحتوياته، مما يعني أنه يتم تجاهل العوامات ولا تنهار الهوامش مع محتويات الحاوية.

لتحديد الموضع الأيمن للنص في التذييل الذي تم ضبطه على العرض المرن، استخدم الخصائص المرنة بدلاً من ذلك. يمكن استخدام الخاصية justify-content لمحاذاة العناصر أفقيًا داخل الحاوية. على سبيل المثال، في مقتطف الشفرة المقدم:

footer {
    display: flex;
    justify-content: flex-end;
}

سيعمل هذا الرمز على محاذاة الامتداد الذي يحتوي على نص "foo link" داخل عنصر التذييل إلى اليمين.