خاصية Align Items

جزء من قسم التنسيق باستخدام CSS في رحلة HTML على Coddy. الدرس 47 من 76.

في CSS، تتحكم الخاصية align-items في كيفية محاذاة عناصر Flex على المحور العرضي (المعاكس للمحور الرئيسي). وتساعد على تحديد موضع العناصر عموديًا في صف أو أفقيًا في عمود. تفيد هذه الخاصية في جعل التخطيطات أكثر مرونة واستجابة.

إليك الصياغة الأساسية لاستخدام الخاصية align-items:

.container {
    display: flex;
    align-items: value;
}

value: المحاذاة المطلوبة لعناصر flex على طول المحور العرضي، ويمكن أن تكون إحدى القيم التالية:

stretch: هذه هي القيمة الافتراضية. يتمدد عناصر flex لملء الحاوية على طول المحور العرضي مع احترام min-width/max-width وmin-height/max-height.

flex-start: تُوضَع عناصر Flex عند بداية المحور المتقاطع.

flex-end: توضع عناصر Flex عند نهاية المحور العرضي.

center: تتمركز عناصر Flex على المحور العرضي.

baseline: تُحاذى عناصر Flex بحيث تتراصف خطوط أساسها.

على سبيل المثال:

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

في هذا المثال، سيحاذي العنصر .container-start عناصره المرنة عند بداية المحور العرضي، وسيُوسّط العنصر .container-center عناصره المرنة على امتداد المحور العرضي.

التحدي

سهل

لديك مستند HTML يحتوي على قسميْن (<div>)، ويحتوي كل منهما على ثلاثة أقسام فرعية.

اتبع الخطوات التالية:

نسّق العنصر .seas:
- اكتب قاعدة CSS تستهدف عنصر <div> ذي الصنف .seas.
- عيّن display إلى flex لتمكين تحديد مواضع العناصر الفرعية بمرونة.
- عيّن الخاصية align-items إلى center لمحاذاة عناصر flex في منتصف المحور العرضي.
نسّق العنصر .oceans:
- اكتب قاعدة CSS تستهدف عنصر <div> ذي الصنف .oceans.
- عيّن display إلى flex لتمكين تحديد مواضع العناصر الفرعية بمرونة.
- عيّن الخاصية align-items إلى flex-end لمحاذاة عناصر flex عند نهاية المحور العرضي.

جرّب بنفسك

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>