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

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

stretch القيمة الأفتراضية وهي تمدد طول العناصر بما يتناسب مع طول الحاوية.
center يتم عرض العناصر في منتصف الحاوية إذا كانت غير عكسية أو غير عكسية.
flex-start يتم عرض العناصر في بداية الحاوية من أعلي إذا كانت غير عكسية عمودياً.
flex-end يتم عرض العناصر في نهاية الحاوية من أسفل إذا كانت غير عكسية عمودياً.
baseline يتم عرض بداية النصوص الداخلية لجميع العناصر علي خط مستقيم واحد داخل الحاوية.

CSS align-items syntax

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

align-items:value;

CSS align-items values

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

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

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

تستخدم خاصية align-items مع القيمة stretch في لغة CSS ليتمدد طول العناصر بما يتناسب مع طول الحاوية وهيالقيمة الأفتراضية.

جربها بنفسك

CSS flex align items stretch

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

.flex-container
{
  display: flex;
  flex-direction:row;
  justify-content:flex-start;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
  height:200px;
  align-items:stretch;
}

جربها بنفسك

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

تستخدم خاصية align-items مع القيمة center في لغة CSS ليتم عرض العناصر في منتصف الحاوية إذا كانت غير عكسية أو غير عكسية.

جربها بنفسك

CSS flex align items center

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

.flex-container
{
  display: flex;
  flex-direction:row;
  justify-content:center;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
  height:200px;
  align-items:center;
}

جربها بنفسك

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

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

جربها بنفسك

CSS flex align items flex start

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

.flex-container
{
  display: flex;
  flex-direction:row;
  justify-content:center;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
  height:200px;
  align-items:flex-start;
}

جربها بنفسك

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

جربها بنفسك

CSS flex align items flex end

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

.flex-container
{
  display: flex;
  flex-direction:row;
  justify-content:center;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
  height:200px;
  align-items:flex-end;
}

جربها بنفسك

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

تستخدم خاصية align-items مع القيمة flex-start في لغة CSS ليتم عرض بداية النصوص الداخلية لجميع العناصر علي خط مستقيم واحد داخل الحاوية جميعها تتماشي معاً.

جربها بنفسك

CSS flex align items baseline

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

.flex-container
{
  display: flex;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
  height:250px;
  align-items:baseline;
}

جربها بنفسك

هام

لاحظ أول عنصر في حاوية flex box له margin top مختلف وتلقائي جميع العناصر تم ضبطها بشكل تلقائي مع أول عنصر علي نفس الخط.

معلومات تهمك

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

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

التالى

CLOSETAG

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

CSS flex Align Items
خاصية align-items مع flex في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS flex Align Items CSS