אתגר Flex Box

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 49 מתוך 76.

אתגר

קל

עכשיו, לאחר ששלטת ביסודות של Flexbox, כולל display: flex;, flex-direction, justify-content ו-align-items, הגיע הזמן לבחון את הידע שלך באתגר מקיף. האתגר הזה יעזור לך לבסס את ההבנה שלך לגבי השימוש במאפיינים האלה יחד ליצירת פריסות גמישות ומגיבות. תיישם את מה שלמדת על כל מאפיין כדי לשחזר עיצוב מסוים.

נתון לך מסמך HTML עם חלוקה אב ( <div>) שמכילה ארבע חלוקות צאצא (<div>). המשימה שלך היא להשתמש במאפייני Flexbox שלמדת כדי לעצב את הרכיבים האלה כך שיתאימו לעיצוב שמוצג בתמונה שלמטה:

פעל לפי השלבים הבאים:

כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה container.
הגדר את המאפיין display של הרכיב .container ל-flex כדי להפוך אותו למכל Flexbox.
הגדר את המאפיין flex-direction של הרכיב .container ל-row-reverse כדי לסדר את פריטי ה-Flex בשורה מימין לשמאל.
הגדר את המאפיין justify-content של הרכיב .container ל-space-between כדי לפזר את פריטי ה-Flex באופן שווה, עם רווחים ביניהם.
הגדר את המאפיין align-items של הרכיב .container ל-flex-end כדי ליישר את פריטי ה-Flex בקצה הציר המשני.
כתוב כללי CSS לעיצוב פריטי ה-Flex הבודדים (item1, item2, item3, item4) בצבעי רקע ובגדלים שונים (באמצעות ריפודים שונים), כפי שמוצג בתמונה.

נסו בעצמכם

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