CSS

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

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

التاريخ

06 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1008

المواضيع

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

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

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

خاصية 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

تستخدم خاصية align-items مع القيمة flex-start في لغة 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 مختلف وتلقائي جميع العناصر تم ضبطها بشكل تلقائي مع أول عنصر علي نفس الخط.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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