flex-grow
שיעור 14 מתוך 15 בקורס CSS Flexbox - הקורס המלא של Coddy.
המאפיין flex-grow מגדיר את היכולת של פריט flex לגדול (אם יש צורך בכך).
הוא מקבל מספר המשמש כיחס.
אם לכל הפריטים מוגדר flex-grow בערך 1, השטח שנותר במכל יחולק באופן שווה בין כל הפריטים הבנים. אם לאחד הפריטים הבנים יש ערך 2, הוא יתפוס פי שניים שטח מכל אחד מהפריטים האחרים.
לדוגמה,
.item {
flex-grow: 4;
}ערך ברירת המחדל הוא 0; מספרים שליליים אינם תקפים.
אתגר
קלניתן לך flexbox עם שלושה פריטי flex. גרום לפריט flex האמצעי לגדול פי שניים מהפריטים שבצדדים.
עליך להגדיר את המאפיין
flex-growלכל הפריטים.
נסו בעצמכם
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>כל השיעורים ביחידה CSS Flexbox - הקורס המלא
תרגלו בעצמכם: Web אונליין