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

חלק מהיחידה עיצוב באמצעות 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>), שכל אחת מהן מכילה שלוש חטיבות צאצא.

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

עצבו את הרכיב .seas:
- כתבו כלל CSS שפונה לרכיב <div> עם המחלקה .seas.
- הגדירו את display לערך flex כדי לאפשר מיקום גמיש של רכיבי הצאצא.
- הגדירו את המאפיין align-items לערך center כדי ליישר את פריטי ה-flex באמצע הציר הניצב.
עצבו את הרכיב .oceans:
- כתבו כלל 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>