align-items
justify-content
. تذكر أن الخاصية justify-content
بمحاذاة عناصر مرنة على طول المحور الرئيسي. بالنسبة للصفوف ، فإن المحور الرئيسي هو خط أفقي ، وبالنسبة للأعمدة فهو خط عمودي. تحتوي الحاويات المرنة أيضًا على محور متقاطع وهو عكس المحور الرئيسي. ﺑﺎﻟﻧﺳﺑﺔ ﻟﻟﺻﻔوف ، ﯾﮐون اﻟﻣﺣور اﻟﻣﺗﻘﺎطﻊ رأﺳﯾًﺎ وﻟﻸﻋﻣدة ، ﯾﮐون اﻟﻣﺣور اﻟﻣﺗﻘﺎطﻊ أﻓﻘﻲ. تقدم CSS على align-items
الملكية لمحاذاة العناصر المرنة على طول المحور العرضي. بالنسبة إلى الصف ، تُعلم CSS كيفية دفع العناصر في الصف بأكمله لأعلى أو لأسفل داخل الحاوية. وللعمود ، كيفية دفع جميع العناصر إلى اليسار أو اليمين داخل الحاوية. تتضمن القيم المختلفة المتاحة align-items
ما يلي: flex-start
: محاذاة العناصر إلى بداية الحاوية المرنة. للصفوف ، يقوم هذا بمحاذاة العناصر إلى أعلى الحاوية. للأعمدة ، يقوم هذا بمحاذاة العناصر إلى يسار الحاوية. flex-end
: محاذاة العناصر إلى نهاية الحاوية المرنة. للصفوف ، يقوم هذا بمحاذاة العناصر إلى أسفل الحاوية. للأعمدة ، يقوم هذا بمحاذاة العناصر إلى يمين الحاوية. center
: محاذاة العناصر إلى المركز. بالنسبة للصفوف ، تتم محاذاة العناصر رأسياً (المساحة المتساوية فوق العناصر وأسفلها). بالنسبة إلى الأعمدة ، تتم محاذاة هذه العناصر أفقياً (تساوي المسافة بين يمين ويسار العناصر). stretch
: تمتد العناصر لملء الحاوية المرن. على سبيل المثال ، يتم توسيع عناصر الصفوف لملء الحاوية المرنة من أعلى لأسفل. baseline
: محاذاة العناصر إلى خطوط الأساس الخاصة بهم. الأساس هو مفهوم نصي ، فكر فيه على أنه الخط الذي تجلس عليه الحروف. align-items
الخاصية CSS إلى عنصر #box-container
، وأعطها قيمة المركز. علاوة align-items
في محرر الشفرات لمعرفة اختلافاتهم. لكن لاحظ أن قيمة المركز هي الوحيدة التي ستجتاز هذا التحدي. #box-container
عنصر #box-container
خاصية align-items
ضبطها على قيمة المركز.'
testString: 'assert($("#box-container").css("align-items") == "center", "The #box-container
element should have an align-items
property set to a value of center.");'
```
Hello
Goodbye