Η Απληστία των Flex Στοιχείων στο CSS

Ας υποθέσουμε ότι έχουμε δύο flex blocks, τακτοποιημένα στη σειρά. Αυτά τα blocks έχουν οριστεί σε πλάτος 100px, ενώ ο γονέας τους έχει πλάτος 300px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Όπως βλέπετε, το συνολικό πλάτος των στοιχείων μας είναι μικρότερο από το πλάτος του γονέα, επομένως στα δεξιά παραμένει κενός χώρος.

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

Ας δούμε στην πράξη πώς λειτουργεί αυτή η ιδιότητα.

Παράδειγμα

Τώρα έχουμε δύο flex blocks με πλάτος 100px. Το συνολικό τους πλάτος 200px, ενώ το πλάτος του γονέα είναι 300px. Αποδεικνύεται ότι παραμένει ελεύθερος χώρος 100px.

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

Για παράδειγμα, ας υποθέσουμε ότι το flex-grow του πρώτου στοιχείου είναι 1, και του δεύτερου - 3. Ας υπολογίσουμε, ποιο μέρος του ελεύθερου χώρου θα λάβει κάθε στοιχείο.

Πρώτα πρέπει να λάβουμε το συνολικό άθροισμα μονάδων flex-grow όλων των στοιχείων μας. Στο πρώτο στοιχείο είναι 1, και στο δεύτερο - 3. Αυτό σημαίνει ότι το άθροισμα είναι 4.

Ας διαιρέσουμε τώρα τους 100px ελεύθερου χώρου με το 4 και παίρνουμε ότι 25px αναλογούν σε μία μονάδα flex-grow. Αποδεικνύεται, ότι στο πρώτο στοιχείο θα προστεθεί μία μονάδα flex-grow, δηλαδή 25px, και στο δεύτερο - τρεις μονάδες, δηλαδή 75px.

Το πλάτος του πρώτου στοιχείου θα γίνει 125px, και του δεύτερου - 175px:

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

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

Παράδειγμα

Ας υποθέσουμε τώρα ότι το πλάτος του γονέα είναι 400px, το πλάτος του πρώτου στοιχείου 200px, και το πλάτος του δεύτερου στοιχείου - 100px. Αποδεικνύεται, ότι ο ελεύθερος χώρος και πάλι ισούται με 100px.

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

Εφόσον όλα τα στοιχεία έχουν την ίδια τιμή flex-grow, τότε σε όλα τα στοιχεία θα προστεθεί η ίδια τιμή των 50px. Αυτό σημαίνει, ότι το πρώτο στοιχείο θα γίνει 250px, και το δεύτερο θα γίνει 150px:

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

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

Παράδειγμα

Ας υποθέσουμε πάλι ότι το πλάτος του γονέα είναι 400px, το πλάτος του πρώτου στοιχείου 200px, και το πλάτος του δεύτερου στοιχείου - 100px.

Ας ορίσουμε τώρα στο πρώτο στοιχείο flex-grow σε τιμή 3, και στο δεύτερο - σε τιμή 1. Αποδεικνύεται ότι η απληστία στο άθροισμα είναι 4. Tότε μία μονάδα απληστίας ισούται με 100px / 4 = 25px.

Στο πρώτο στοιχείο θα προστεθούν 75px, και θα γίνει 275px, ενώ στο δεύτερο - 25px, θα γίνει 125px:

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

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

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

Σε όλες τις ασκήσεις παρακάτω, θα σας παρουσιαστεί κάποιος κώδικας με 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: 3;
}
.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: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 2;
}
.elem3 {
	width: 200px;
	flex-grow: 3;
}

<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: 100px;
	flex-grow: 1;
}
.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 class="child elem4">4</div>
</div>

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