انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 82
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
8
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,691
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

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.

HTML 
align-self:value;

CSS align-self values

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

HTML 
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.

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.two
{
align-self:baseline;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…