CSS flex Align Items
خاصية align-items مع flex في لغة CSS
سوف تتعلم في هذا الدرس خاصية align-items في لغة CSS ووظيفيتها وكيفية إستخدامها مع حاويات flex box وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
هام
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
