Μηδενική απληστία των flex στοιχείων στο CSS

Εάν το flex-grow είναι μηδέν για κάποιο στοιχείο, τότε αυτό το στοιχείο δεν θα συμμετέχει στην κατανομή του ελεύθερου χώρου. Από προεπιλογή, η απληστία έχει ακριβώς μηδενική τιμή και γι' αυτό τα στοιχεία χωρίς καθορισμένο flex-grow δεν μοιράζονται τον ελεύθερο χώρο μεταξύ τους.

Ας κάνουμε έναν υπολογισμό για παράδειγμα. Ας υποθέσουμε ότι έχουμε τρία flex στοιχεία, το καθένα με πλάτος 100px. Ας υποθέσουμε ότι το πρώτο στοιχείο δεν έχει flex-grow (ή είναι ίσο με 0), το δεύτερο στοιχείο έχει flex-grow ίσο με 2, και το τρίτο - ίσο με 3.

Ας υποθέσουμε ότι το πλάτος του γονέα είναι 500px. Τότε ο ελεύθερος χώρος θα είναι ίσος με 200px, και σε μία μονάδα flex-grow θα αντιστοιχεί 200px / 5 = 40px. Θα προκύψει ότι το πλάτος του πρώτου στοιχείου θα παραμείνει 100px, καθώς δεν συμμετέχει στην κατανομή, το πλάτος του δεύτερου θα είναι 100px + 2 * 40px = 180px, και το πλάτος του τρίτου - 100px + 3 * 40px = 220px.

Πρακτικές ασκήσεις

Σε όλες τις ασκήσεις παρακάτω, θα σας δίνεται κάποιος κώδικας με flex στοιχεία που έχουν πλάτος και flex-grow. Βάσει του κώδικα που παρουσιάζεται υπολογίστε τι διαστάσεις θα έχει το καθένα από τα στοιχεία. Στη συνέχεια, εκτελέστε τον κώδικα και ελέγξτε τους υπολογισμούς σας, μετρώντας τα πραγματικά πλάτη των στοιχείων.

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 900px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 3;
}
.elem3 {
	width: 100px;
	flex-grow: 2;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
	<div class="child elem4">4</div>
</div>

.parent {
	display: flex;
	width: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 0;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}
.elem4 {
	width: 100px;
	flex-grow: 1;
}