خاصية Align Items

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 47 من 76.

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

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

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

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

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

flex-start: توضع العناصر المرنة (Flex items) في بداية المحور المتقاطع (cross axis).

flex-end: توضع عناصر flex في نهاية المحور المتقاطع.

center: يتم توسيط عناصر Flex على طول المحور المتقاطع.

baseline: يتم محاذاة عناصر Flex بحيث تتماشى خطوط الأساس (baselines) الخاصة بها.

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

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

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

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

التحدي

سهل

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

اتبع الخطوات أدناه:

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

ورقة مرجعية

تتحكم خاصية align-items في كيفية محاذاة عناصر flex على طول المحور المتقاطع (عكس المحور الرئيسي):

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

القيم المتاحة:

stretch: الافتراضي. تتمدد العناصر لملء الحاوية
flex-start: يتم وضع العناصر في بداية المحور المتقاطع
flex-end: يتم وضع العناصر في نهاية المحور المتقاطع
center: يتم توسيط العناصر على طول المحور المتقاطع
baseline: يتم محاذاة العناصر حسب خطوط الأساس الخاصة بها

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

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

جرّب بنفسك

<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>