מה זה Flex Box?

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

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

כדי להשתמש ב-Flexbox, קודם צריך להגדיר מְכוֹלָה גמישה. עושים זאת על ידי הגדרת המאפיין display של רכיב ל-flex או ל-inline-flex. לאחר שיצרת מְכוֹלָה גמישה, הילדים הישירים שלה הופכים אוטומטית לפריטים גמישים.

הנה התחביר הבסיסי ליצירת מכל גמיש:

.container {
    display: flex;
}

display: flex;: הצהרה זו הופכת את הרכיב שנבחר למכל גמיש ואת הילדים הישירים שלו לפריטים גמישים.

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

flex-direction: מציין את הכיוון של פריטי ה-flex (row, column, row-reverse, column-reverse).
justify-content: מיישר את פריטי ה-flex לאורך הציר הראשי (למשל, flex-start, flex-end, center, space-between, space-around).

align-items: מיישר את פריטי ה־flex לאורך הציר המשני (למשל, flex-start, flex-end, center, baseline, stretch).
flex-wrap: קובע אם פריטי ה־flex יגלשו לכמה שורות (wrap, nowrap, wrap-reverse).
align-content: מיישר את שורות ה־flex כשיש מקום פנוי לאורך הציר המשני (בדומה ל־justify-content, אבל לכמה שורות).

אתגר

קל

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

כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה container.
הגדר את המאפיין display של הרכיב .container לערך flex.

נסו בעצמכם

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>