יישור התוכן

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

ב-CSS, המאפיין justify-content קובע כיצד פריטי flex מרווחים לאורך הציר הראשי של מכל flex. הוא עוזר ליישר פריטים ולפזר שטח נוסף כשנותר מקום. המאפיין הזה שימושי למיקום פריטים אופקית (בשורה) או אנכית (בעמודה), וכך מאפשר ליצור פריסות גמישות ומותאמות יותר.

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

.container {
    display: flex;
    justify-content: value;
}

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

flex-start: זהו ערך ברירת המחדל. הפריטים נדחסים לכיוון תחילת השורה.

flex-end: הפריטים נדחסים לכיוון סוף השורה.

center: הפריטים ממורכזים לאורך השורה.

space-between: הפריטים מפוזרים באופן שווה לאורך הקו, כשהפריט הראשון בתחילתו והפריט האחרון בסופו.

space-around: הפריטים מפוזרים באופן אחיד לאורך השורה, עם רווח שווה סביבם.

space-evenly: הפריטים מפוזרים כך שהמרווח בין כל שני פריטים (וגם המרווח עד לקצוות) שווה.

לדוגמה:

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

בדוגמה הזו, האלמנט .container-start יישר את פריטי ה־flex שלו לתחילת הציר הראשי, והאלמנט .container-center ימרכז את פריטי ה־flex שלו לאורך הציר הראשי.

אתגר

קל

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

כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה fruits.
הגדר את המאפיין justify-content של הרכיב .fruits לערך center כדי למרכז את פריטי ה-flex לאורך הציר הראשי.
כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה vegetables.
הגדר את המאפיין justify-content של הרכיב .vegetables לערך space-between כדי לפזר את פריטי ה-flex לאורך הציר הראשי.

נסו בעצמכם

<html>
<head>
    <title>Justify Content</title>
    <style>
        .fruits, .vegetables {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="fruits">
        <div>Apple</div>
        <div>Banana</div>
        <div>Mango</div>
    </div>
    <div class="vegetables">
        <div>Tomato</div>
        <div>Potato</div>
        <div>Cucumber</div>
    </div>
</body>
</html>