כיוון Flex

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

ב-CSS, המאפיין flex-direction קובע את הכיוון שבו הפריטים מסודרים בתוך מכל גמיש. הוא קובע אם הפריטים יוצבו בשורה או בעמודה.

זה משפיע גם על אופן הפעולה של מאפיינים כמו justify-content ו-align-items. שימוש נכון ב-flex-direction עוזר בבניית פריסות גמישות ורספונסיביות.

הנה התחביר הבסיסי לשימוש במאפיין flex-direction:

.container {
    display: flex;
    flex-direction: value;
}

value: הכיוון הרצוי של פריטי ה-flex, שיכול להיות אחד מהבאים:

row: זהו ערך ברירת המחדל. פריטי Flex ממוקמים בשורה, משמאל לימין. הציר הראשי אופקי, והציר המשני אנכי.

row-reverse: פריטי Flex ממוקמים בשורה, מימין לשמאל. הציר הראשי אופקי, והציר המשני אנכי.

column: פריטי Flex מסודרים בעמודה, מלמעלה למטה. הציר הראשי אנכי, והציר המשני אופקי.

column-reverse: פריטי Flex מסודרים בעמודה, מלמטה למעלה. הציר הראשי הוא אנכי, והציר המשני הוא אופקי.

לדוגמה:

.container-row {
    display: flex;
    flex-direction: row;
}

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

בדוגמה הזו, האלמנט .container-row יציג את פריטי ה־flex שלו בשורה משמאל לימין, והאלמנט .container-row-reverse יציג אותם מימין לשמאל.

אתגר

קל

ניתן לך מסמך HTML עם שני רכיבי <strong><div></strong> אב, שכל אחד מהם מכיל שלושה רכיבי <strong><div></strong> ילד. רכיבי ה־<div> האב כבר הוגדרו כמכולות flex באמצעות display: flex;. המשימה שלך היא להשתמש במאפיין flex-direction כדי לשנות את סידור פריטי ה־flex.

בצעו את השלבים הבאים:

כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה container1.
- הגדר את המאפיין flex-direction שלו ל־column כדי לסדר את פריטי ה־flex בעמודה אנכית.
כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה container2.
- הגדר את המאפיין flex-direction שלו ל־column-reverse כדי לסדר את פריטי ה־flex בעמודה הפוכה.

נסו בעצמכם

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>