CSS

CSS Flex Align Self
خاصية align-self مع flex box في لغة CSS

سوف تتعلم في هذا الدرس خاصية align-self في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية flex box وجميع القيم الخاصة بها.

التاريخ

07 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

880

المواضيع

24
الشروحات chevron_left CSS Flex Align Self chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Flex Align Self
خاصية align-self مع flex box في لغة CSS

</> CSS flex align self
خاصية align-self مع flex box في لغة CSS

تستخدم خاصية align-self مع العناصر الداخلية لحاوية flex box في لغة CSS للتحكم في محاذاة عنصر محدد داخل حاوية flex box.


قيم خاصية align-self في لغة CSS:

  • auto هي القيمة الأفتراضية. ويورث العنصر المحاذاة من حاوية فليكس بوكس التي تم ضبطها من خاصية align-items ويتمدد اذ لم يكن له حاوية أب.
  • stretch سوف يكون وضع العنصر علي حسب وضع حاوية flex box.
  • center سوف يكون العنصر في منتصف حاوية flex box.
  • flex-start سوف يكون العنصر في بداية حاوية flex box.
  • flex-end سوف يكون العنصر في نهاية حاوية flex box.
  • baseline سوف يكون العنصر علي خط بداية سطر حاوية flex box.
CSS align-self syntax

طريقة كتابة خاصية align-self في لغة CSS.

align-self:value;
CSS align-self values

قيم خاصية align-self في لغة CSS.

align-self:auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

</> CSS flex align self auto
خاصية align-self مع القيمة auto في لغة CSS

تستخدم خاصية flex-grow مع flex items بداخل حاوية flex box في لغة CSS مع القيمة auto وهي القيمة الأفتراضية. ويورث العنصر المحاذاة من حاوية فليكس بوكس التي تم ضبطها من خاصية align-items ويتمدد اذ لم يكن له حاوية أب.

CSS flex align self auto

خاصية align-self مع القيمة auto في لغة CSS.

.two
{
align-self:auto;
}

</> CSS flex align self stretch
خاصية align-self مع القيمة stretch في لغة CSS

تستخدم خاصية align-self مع flex items بداخل حاوية flex box في لغة CSS مع القيمة streach ليتمدد العنصر علي حسب حجم حاوية flex box.

CSS flex align self stretch

خاصية align-self مع القيمة stretch في لغة CSS.

.two
{
align-self:stretch;
}

</> CSS flex align self center
خاصية align-self مع القيمة center في لغة CSS

تستخدم خاصية align-self مع flex items بداخل حاوية flex box في لغة CSS مع القيمة center ليكون وضع العنصر في منتصف حاوية flex box.

CSS flex align self center

خاصية align-self مع القيمة center في لغة CSS.

.two
{
align-self:center;
}

</> CSS flex align self flex start
خاصية align-self مع القيمة flex-start في لغة CSS

تستخدم خاصية align-self مع flex items بداخل حاوية flex box في لغة CSS مع القيمة flex-start ليكون وضع العنصر في بداية حاوية flex box.

CSS flex align self flex start

خاصية align-self مع القيمة flex-start في لغة CSS.

.two
{
align-self:flex-start;
}

</> CSS flex align self flex end
خاصية align-self مع القيمة flex-end في لغة CSS

تستخدم خاصية align-self مع flex items بداخل حاوية flex box في لغة CSS مع القيمة flex-end ليكون وضع العنصر في نهاية حاوية flex box.

CSS flex align self flex end

خاصية align-self مع القيمة flex-end في لغة CSS.

.two
{
align-self:flex-end;
}

</> CSS flex align self baseline
خاصية align-self مع القيمة baseline في لغة CSS

تستخدم خاصية align-self مع flex items بداخل حاوية flex box في لغة CSS مع القيمة baseline ليكون العنصر علي خط بداية سطر حاوية flex box.

CSS flex align self baseline

خاصية align-self مع القيمة baseline في لغة CSS.

.two
{
align-self:baseline;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.