المحاذاة (Float)

نظرة عامة

تقوم فئات الأدوات هذه بمحاذاة العنصر إلى اليمين أو اليسار، أو إلغاء المحاذاة، بناءً على حجم نافذة العرض الحالية باستخدام float الخاص بـ CSS. تم تضمين !important لتجنب مشكلات التخصيص (specificity). تستخدم هذه الأدوات نفس نقاط التوقف (breakpoints) الخاصة بنظام الشبكة لدينا. يرجى العلم أن أدوات المحاذاة ليس لها أي تأثير على عناصر flex.

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don’t float on all viewport sizes</div>

استخدم مساعد clearfix على العنصر الأب لإلغاء المحاذاة.

المتوافق مع الشاشات (Responsive)

توجد أيضاً متغيرات متوافقة مع الشاشات (Responsive) لكل قيمة float.

<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>

إليك جميع الفئات (classes) المدعومة:

• .float-start
• .float-end
• .float-none
• .float-sm-start
• .float-sm-end
• .float-sm-none
• .float-md-start
• .float-md-end
• .float-md-none
• .float-lg-start
• .float-lg-end
• .float-lg-none
• .float-xl-start
• .float-xl-end
• .float-xl-none
• .float-xxl-start
• .float-xxl-end
• .float-xxl-none

الـ (CSS)

واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)

يتم التصريح عن أدوات المحاذاة في واجهة برمجة تطبيقات الأدوات الخاصة بنا في scss/_utilities.scss. تعلم كيفية استخدام واجهة برمجة تطبيقات الأدوات.

"float": (
  responsive: true,
  property: float,
  values: (
    start: left,
    end: right,
    none: none,
  )
),