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;
}

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Flex Align Self CSS