המדריך המלא ל-flexbox ב-CSS

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

אפתח בהבהרה – נכון, Grid layout הוא נושא חדיש ב-CSS בכל הקשור לעימוד עצמים אך לדעתי, הוא אינו מחליף את flexbox, לפחות לא כיום (תמיכת דפדפנים).
להרחבה על הנושא, אני ממליץ לקרוא את המאמר הנהדר הבא.
שנתחיל ללמוד flexbox? 🙂

הגדרת ה-container כ-flex

ראשית, על מנת להכריז ל-CSS כי אנו מעוניינים שה-container והאלמנטים שתחתיו יכירו במודל ה-flex, אנו צריכים לתת ל-container את המאפיין הבא:

display: flex;

סידור אלמנטים זה לצד זה

אחת המשימות הנפוצות בפריסת האתר היא מיקום מספר אלמנטים זה לצד זה.
בדוגמא הבאה, אמקם 3 אלמנטים זה לצד זה.

ה-HTML:

<div class="main-container">
    <div class="box-1">
        <h3>BOX 1</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet cum debitis, deserunt distinctio dolorum
            eius facilis fuga labore nam nesciunt nihil odio, quisquam repellat rerum sapiente veniam voluptas
            voluptates?
        </p>
    </div>
    <div class="box-2">
        <h3>BOX 2</h3>
        <p>
            orem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid aperiam aspernatur ea eaque eos
            fuga illo in, laborum modi natus nulla omnis placeat quas quos ratione soluta sunt vero.
        </p>
    </div>
    <div class="box-3">
        <h3>BOX 3</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam culpa delectus ea enim error est laborum
            nulla quis sit vero! Animi dolore doloremque, odit quidem quo sit velit voluptatem voluptatibus.
        </p>
    </div>
</div>

ה-CSS:

.main-container {
    display:flex;
}
.main-container > div {
    border:1px solid #000000;
    text-align: center;
}
.main-container .box-1 {
    flex:1;
}
.main-container .box-2 {
    flex:1;
}
.main-container .box-3 {
    flex:1;
}

והתוצאה:

3 אלמנטים זה לצד זה באמצעות flex
3 אלמנטים זה לצד זה באמצעות flex

אז מה בעצם קורה כאן ואיך זה שהקסם הקטן הזה קורה ללא שימוש ב-float?
למעשה, לא קורה כאן הרבה מלבד הוספת ההגדרה display:flex לאלמנט האב (main-container).
התוספת flex:1 לאלמנטים שתחתיו (box-1, box-2, ו-box-3 במקרה זה) מאפשרים לנו לקבוע את החלוקה בין האלמנטים.
אם נרצה למשל ש-box 1 יהיה גדול פי 2 מגודל הבסיס (1), עלינו לשנות את ה-flex שלו ל-2:

.main-container .box-1 {
    flex:2;
}

והתוצאה:

שינוי גודל אלמנט באמצעות flex
שינוי גודל אלמנט באמצעות flex

עמודה או שורה

המאפיין flex-direction מוגדר באלמנט האב והוא קובע האם האלמנטים יסודרו בשורה (row – ברירת מחדל) או עמודה (column).
נחמד לדעת row-reverse ידאג לשורה בכיוון ההפוך וכנ"ל column-reverse לעמודה.

שינוי סדר התצוגה ללא שינוי ה-HTML

מה אם נרצה שהאלמנט box-1 יהיה באמצע, box-2 מימין ו-box-3 משמאל?
הכירו את order:

.main-container .box-1 {
    flex:2;
    order:2;
}
.main-container .box-2 {
    flex:1;
    order:3;
}
.main-container .box-3 {
    flex:1;
    order:1;
}

והתוצאה:

שינוי סדר האלמנטים באמצעות order
שינוי סדר האלמנטים באמצעות order

כן, אין צורך לשנות את סדר האלמנטים ב-HTML!

מיקום האלמנטים כשורה אחידה, למעלה, לאמצע או למטה

באופן ברירת מחדל, האלמנטים מיושרים כשורה אחת, זה לצד זה ללא תלות בגובהם.
מאפיין זה נקרא align-items וערך ברירת המחדל שלו הוא stretch.
אם נרצה שהאלמנטים יימשכו כלפי מעלה, נוסיף את המאפיין הבא עם הערך flex-start לאלמנט האב:

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

וכך זה ייראה:

יישור האלמנטים כלפי מעלה
יישור האלמנטים כלפי מעלה

כלפי מטה באמצעות flex-end:

יישור האלמנטים כלפי מטה
יישור האלמנטים כלפי מטה

ואם נרצה ליישר למרכז, נרשום center בלבד, בצורה הבאה:

align-items: center;

וכך זה נראה:

יישור האלמנטים למרכז
יישור האלמנטים למרכז

הגדרת רוחב/גובה האלמנטים

כפי שראינו בדוגמא בתחילת המאמר, ניתן לחלק את השטח על ידי שימוש במאפיין flex והשמת הערך במכפלות של 1.
יש לציין כי יש באפשרותנו להגדיר את רוחב/גובה האלמנטים בצורה נוספת, ספציפית יותר.
הגדרה זו נעשית ידי המאפיין flex-basis.
בדוגמא זו למשל, נגדיר שרוחב כל אלמנט בן של אלמנט האב (main-container) הוא ברוחב 30%:

.main-container > div {
    border:1px solid #000000;
    text-align: center;
    flex-basis: 30%;
}

והתוצאה:

הגדרת רוחב האלמנטים באמצעות flex-basis
הגדרת רוחב האלמנטים באמצעות flex-basis

בדוגמא זו הרוחב הוא שמושפע מכיוון שהמאפיין flex-direction מוגדר כ-row, במידה והיה מוגדר כ-column, הגובה הוא שמושפע.

ריווח בין אלמנטים

ניתן לראות בדוגמא מעלה כי אכן רוחב כל אלמנט הוא 30% מהרוחב הכללי אך הם מיושרים לשמאל והאחוזים שנותרו לא מנוצלים לריווח בין האלמנטים.
אז איך ניתן לעשות זאת? באמצעות המאפיין justify-content עם הערך space-between לאלמנט האב:

.main-container {
    display:flex;
    justify-content: space-between;
}

והתוצאה:

הגדרת ריווח בין האלמנטים באמצעות justify-content
הגדרת ריווח בין האלמנטים באמצעות justify-content

יש לציין כי הערך space-around ידאג שיהיה ריווח גם בצדדים.

רספונסיביות ו"שבירת" תצוגת אלמנטים

כמובן שאת ההגדרות השונות הנ"ל ניתן להכניס ל-media query כרגיל ובכך לקבוע את הגדרות הרספונסיביות.
במידה ובחרנו להגדיר את רוחב האלמנטים באמצעות width, נראה כי האלמנטים ישמרו על מינימום רוחב כמספר הפיקסלים, אך מה יקרה כאשר נגיע למסך קטן יותר? סביר להניח כי נרצה שתצורת האלמנטים "תישבר".
הגדרת ברירת המחדל של המאפיין flex-wrap החל על אלמנט האב הוא nowrap, שינוי הערך ל-wrap יאפשר לאלמנטים הבנים "להישבר" בהתאם לרוחב התצוגה.

כך נראה ה-CSS שלנו כרגע:

.main-container {
    display:flex;
    justify-content: space-between;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}
.main-container > div {
    border:1px solid #000000;
    text-align: center;
    width:200px;
}
.main-container .box-1 {
    order:2;
}
.main-container .box-2 {
    order:3;
}
.main-container .box-3 {
    order:1;
}

וכך השבירה מתבצעת כאשר המסך קטן:

שבירת אלמנטים באמצעות flex-wrap
שבירת אלמנטים באמצעות flex-wrap

סיכום

במאמר זה הכרנו פקודות נפוצות של flex ואין ספק שזוהו מודל נוח מאוד, קל ליישום ואפילו בעל תמיכה כמעט מושלמת מצד הדפדפנים ולכן כל מה שנותר הוא להתחיל ליישם ומבלי לתרץ! 🙂
מי שמעוניין להרחיב בדוגמאות ובפקודות, אני ממליץ לקרוא את המדריך הבא.

בהצלחה!

נהנת ממאמר זה? לחץ כאן על מנת להירשם לרשימה התפוצה ולקבל עדכונים על מאמרים נוספים!

4 תגובות בנושא “המדריך המלא ל-flexbox ב-CSS”

  1. היי דור,
    כתבה מעולה! אתה בהחלט מסביר דברים בצורה ברורה וקלילה. יש גם דוגמה לכל דבר שזה אחלה.
    בוא נדבר! יש כמה דברים שהייתי מוסיף לכתבה 🙂

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *