تحدي Flex Box

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

التحدي

سهل

الآن بعد أن أتقنت أساسيات Flexbox، بما في ذلك display: flex;، و flex-direction، و justify-content، و align-items، حان الوقت لاختبار معرفتك بتحدٍ شامل. سيساعدك هذا التحدي على ترسيخ فهمك لكيفية استخدام هذه الخصائص معًا لإنشاء تخطيطات مرنة ومتجاوبة. ستطبق ما تعلمته عن كل خاصية لإعادة إنشاء تصميم محدد.

لقد تم تزويدك بمستند HTML يحتوي على قسم أب (<div>) يضم أربعة أقسام أبناء (<div>). مهمتك هي استخدام خصائص Flexbox التي تعلمتها لتنسيق هذه العناصر لتطابق التصميم الموضح في الصورة أدناه:

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

اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل الفئة container.
اضبط خاصية display لعنصر .container على flex لتحويله إلى حاوية مرنة.
اضبط خاصية flex-direction لعنصر .container على row-reverse لترتيب العناصر المرنة في صف من اليمين إلى اليسار.
اضبط خاصية justify-content لعنصر .container على space-between لتوزيع العناصر المرنة بالتساوي مع وجود مسافات بينها.
اضبط خاصية align-items لعنصر .container على flex-end لمحاذاة العناصر المرنة عند نهاية المحور المتقاطع.
اكتب قواعد CSS لتنسيق العناصر المرنة الفردية (item1، item2، item3، item4) بألوان خلفية وأحجام مختلفة (باستخدام قيم padding مختلفة) كما هو موضح في الصورة.

جرّب بنفسك

<html>
<head>
    <title>Flex Box Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
        <div class="item4">Item 4</div>
    </div>
</body>
</html>