יישור הפריטים

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

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

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

.container {
    display: flex;
    align-items: value;
}

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

stretch: זהו ערך ברירת המחדל. פריטי ה-flex נמתחים כדי למלא את המכל לאורך הציר הניצב, תוך התחשבות ב-min-width/max-width וב-min-height/max-height.

flex-start: פריטי Flex ממוקמים בתחילת הציר המשני.

flex-end: פריטי Flex ממוקמים בקצה הציר הרוחבי.

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

baseline: פריטי Flex מיושרים כך שקווי הבסיס שלהם מיושרים.

לדוגמה:

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

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

אתגר

קל

ניתן לך מסמך HTML עם שני רכיבי <div>, שכל אחד מהם מכיל שלושה רכיבי <div> צאצאים.

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

עצב את הרכיב <strong>.seas</strong>:
- כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה .seas.
- הגדר את display ל-flex כדי לאפשר מיקום גמיש של רכיבי הצאצא.
- הגדר את המאפיין align-items ל-center כדי ליישר את פריטי ה-flex במרכז הציר המשני.
עצב את הרכיב <strong>.oceans</strong>:
- כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה .oceans.
- הגדר את display ל-flex כדי לאפשר מיקום גמיש של רכיבי הצאצא.
- הגדר את המאפיין align-items ל-flex-end כדי ליישר את פריטי ה-flex בקצה הציר המשני.

נסו בעצמכם

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>