شرح صفوف ومحتوى الفقرة
تستخدم كلاسات align-items لعمل محاذاة راسية للعناصر داخل container الذي يعمل يمكن استخدامها لعمل محاذاة افقية في حال كان container يعمل بنظام flex-column.
يوجد مجموعة قيم لكلاسات align-items وهي كالاتي:
- align-items-stretch: وهو الوضع الافتراض ويتسخدم لاعطاء كل عنصر طول parent element بالكامل.
- align-items-start: لمحاذاة العناصر راسيا في بداية parent element.
- align-items-center: لمحاذاة العناصر راسيا في منتصف parent element.
- align-items-end: لمحاذاة العناصر راسيا في نهاية parent element.
- align-items-baseline: لمحاذاة العناصر راسيا بحيث تكون نهاية النص الموجود داخل كل عنصر جميعها على خط افقي واحد.
Flex Align Items
عمل محاذاة راسية للعناصر داخل container يعمل بنظام flex-box.
HTML
<div class="d-flex align-items-start bg-secondary text-white mb-2">
<div class="p-2 bg-primary">Flex Start 1</div>
<div class="p-2 bg-primary">Flex Start 2</div>
<div class="p-2 bg-primary">Flex Start 3</div>
</div>