في هذا الدرس 6تصفّح المواضيع
خاصية 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;تستخدم خاصية 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;
}تستخدم خاصية 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;
}تستخدم خاصية 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;
}تستخدم خاصية 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;
}تستخدم خاصية 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;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.