@meir-lamdan
וואלה — פתרת את זה! אפילו אם זה היה בטעות 
הוספת גם באמצעי flex: 1, פשוט שכחת את ה־;, ולכן בפועל זה עבד בגלל הטעות.
הפתרון הנכון עובד כך:
בצד שמאל ובצד ימין מגדירים flex: 1, ואילו לאמצעי לא מגדירים כלום — שזה למעשה שווה־ערך ל־flex: 0 1 auto.
למה זה עובד?
כלל חשוב ב-Flexbox: ערכי ה-flex אינם מחולקים לפי מספר הפריטים, אלא רק לפי גורמי הגידול (grow).
כלומר, במקרה שלנו:
Left → grow: 1
Middle → grow: 0
Right → grow: 1
החישוב:
1 + 0 + 1 = 2
התוצאה:
Left מקבל חצי מהחלל הפנוי
Right מקבל חצי מהחלל הפנוי
Middle לא מקבל כלום מהחלל הנוסף (grow = 0)
אבל — ה-Middle עדיין מקבל את רוחב התוכן שלו (flex-basis: auto), ולכן הוא מתפרס בדיוק במרחב שנשאר בין שני הצדדים.
יש עוד פרט חשוב שבלעדיו זה לא יעבוד
.side-right {
display: flex;
justify-content: flex-end;
}
בלי זה האלמנים שבאיזור הימני יידבקו לצד שמאל ואז ייוצר בלגן. עם זה האלמנטים שבאיזור הימני נדבקים לצד ימין כמו שצריך מה שמשאיר את שאר המקום פנוי לאלמנט האמצעי.
האמת היא שאני לא מבין את כל זה עד הסוף אם מישהו יכול להסביר את זה יותר טוב מאוד אשמח