כיוון 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 עם שני רכיבי <div> אב, שכל אחד מהם מכיל שלושה רכיבי <div> צאצאים. רכיבי <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>