freeCodeCamp

4.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78ad367417b2b2512af8	Align Elements Using the align-items Property	0		محاذاة العناصر باستخدام خاصية عناصر المحاذاة

Description

يشبه الخاصية align-items justify-content . تذكر أن الخاصية justify-content بمحاذاة عناصر مرنة على طول المحور الرئيسي. بالنسبة للصفوف ، فإن المحور الرئيسي هو خط أفقي ، وبالنسبة للأعمدة فهو خط عمودي. تحتوي الحاويات المرنة أيضًا على محور متقاطع وهو عكس المحور الرئيسي. ﺑﺎﻟﻧﺳﺑﺔ ﻟﻟﺻﻔوف ، ﯾﮐون اﻟﻣﺣور اﻟﻣﺗﻘﺎطﻊ رأﺳﯾًﺎ وﻟﻸﻋﻣدة ، ﯾﮐون اﻟﻣﺣور اﻟﻣﺗﻘﺎطﻊ أﻓﻘﻲ. تقدم CSS على align-items الملكية لمحاذاة العناصر المرنة على طول المحور العرضي. بالنسبة إلى الصف ، تُعلم CSS كيفية دفع العناصر في الصف بأكمله لأعلى أو لأسفل داخل الحاوية. وللعمود ، كيفية دفع جميع العناصر إلى اليسار أو اليمين داخل الحاوية. تتضمن القيم المختلفة المتاحة align-items ما يلي:

flex-start : محاذاة العناصر إلى بداية الحاوية المرنة. للصفوف ، يقوم هذا بمحاذاة العناصر إلى أعلى الحاوية. للأعمدة ، يقوم هذا بمحاذاة العناصر إلى يسار الحاوية.
flex-end : محاذاة العناصر إلى نهاية الحاوية المرنة. للصفوف ، يقوم هذا بمحاذاة العناصر إلى أسفل الحاوية. للأعمدة ، يقوم هذا بمحاذاة العناصر إلى يمين الحاوية.
center : محاذاة العناصر إلى المركز. بالنسبة للصفوف ، تتم محاذاة العناصر رأسياً (المساحة المتساوية فوق العناصر وأسفلها). بالنسبة إلى الأعمدة ، تتم محاذاة هذه العناصر أفقياً (تساوي المسافة بين يمين ويسار العناصر).
stretch : تمتد العناصر لملء الحاوية المرن. على سبيل المثال ، يتم توسيع عناصر الصفوف لملء الحاوية المرنة من أعلى لأسفل.
baseline : محاذاة العناصر إلى خطوط الأساس الخاصة بهم. الأساس هو مفهوم نصي ، فكر فيه على أنه الخط الذي تجلس عليه الحروف.

Instructions

مثال يساعد على إظهار هذه الخاصية في العمل. أضف align-items الخاصية CSS إلى عنصر #box-container ، وأعطها قيمة المركز. علاوة
جرّب الخيارات الأخرى align-items في محرر الشفرات لمعرفة اختلافاتهم. لكن لاحظ أن قيمة المركز هي الوحيدة التي ستجتاز هذا التحدي.

Tests

tests:
  - text: 'يجب أن <code>#box-container</code> عنصر <code>#box-container</code> خاصية <code>align-items</code> ضبطها على قيمة المركز.'
    testString: 'assert($("#box-container").css("align-items") == "center", "The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.");'

Challenge Seed

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;

  }
  #box-1 {
    background-color: dodgerblue;
    width: 200px;
    font-size: 24px;
  }

  #box-2 {
    background-color: orangered;
    width: 200px;
    font-size: 18px;
  }
</style>

<div id="box-container">
  <div id="box-1"><p>Hello</p></div>
  <div id="box-2"><p>Goodbye</p></div>
</div>

Solution

// solution required

4.6 KiB Raw Blame History