דמיינו שניה דף HTML שמחולק לתיבת צד ותוכן מרכזי. נו, אתם מכירים כאלה, משהו כזה:
<div class="main">
<div class="sidebar" >
<ul>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</div>
<div class="content">
<p>
Flexbox is really cool if you know how to use it
</p>
</div>
</div>
עם הגדרות ה CSS הבאות אפשר לקבוע שהרשימה בתיבת הצד תיקח 300 פיקסלים והתוכן המרכזי יקבל את כל השאר:
.main {
display: flex;
}
.sidebar {
width: 300px;
}
.content {
flex: 1;
}
אבל אל תנסו את זה בבית.
המאפיין width של תיבת הצד הוא רק חלק מהסיפור. נכון, ב HTML הדוגמה הוא באמת יקבע את הרוחב, אבל זה רק בגלל שהדפדפן לא מצא סיבה טובה לכווץ אותו קצת. אם נעדכן את ה HTML ונוסיף תמונה רחבה:
<div class="main">
<div class="sidebar" >
<ul>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</div>
<div class="content">
<p>
Flexbox is really cool if you know how to use it
</p>
<div>
<img src="https://placekitten.com/400/300" />
</div>
</div>
</div>
ועכשיו נשנה את גודל החלון נוכל לראות שבשלב מסוים הדפדפן מתחיל להילחץ - הוא לא רוצה לצייר פס גלילה אופקי בשביל החתול, ולכן הוא מוותר על חלק מהרוחב של תיבת הצד. הנה קודפן למשחקים:
הסיבה שהוא מרשה לעצמו ככה להשתולל היא שלא הגדרנו ערך למאפיין flex-shrink של תיבת הצד, וערך ברירת המחדל של מאפיין זה הוא 1 - שאומר שמותר לכווץ את האלמנט אם זה חוסך בעיות במקומות אחרים.
דרך קשוחה יותר לקבוע רוחב לילד בתוך מיכל פלקס היא לציין את flex-shrink להיות 0 (ועל הדרך גם את flex-grow):
.sidebar {
width: 300px;
flex-shrink: 0;
flex-grow: 0;
}
הגדרה כזאת מכריחה את הדפדפן להשאיר את האלמנט ברוחב 300, גם אם הוא היה מעדיף אחרת.
ואם אנחנו כבר פה שווה להזכיר ש width הוא לא הדרך הכי טובה לקבוע גודל של ילד בתוך מיכל פלקס, בגלל שמיכל פלקס יכול גם להיות אנכי. המאפיין flex-basis יקבע את הרוחב או הגובה של האלמנט לפי כיוון המיכל ולכן הקוד הזה עדיף:
.sidebar {
flex-basis: 300px;
flex-shrink: 0;
flex-grow: 0;
}
ולזה יש כבר קיצור דרך פלקסי שבטח פגשתם בכל מיני דוגמאות:
.sidebar {
flex: 0 0 300px;
}
