מה זה Flex Box?

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

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

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

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

.container {
    display: flex;
}

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

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

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; כדי להפוך את חלוקת האב למכולת 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>