Η ιδιότητα flex-grow

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

Για παράδειγμα, εάν όλα τα flex-μπλοκ μέσα σε ένα flex-περιέκτη έχουν flex-grow:1, τότε θα έχουν το ίδιο μέγεθος. Εάν ένα από αυτά έχει flex-grow:2, τότε θα είναι 2 φορές μεγαλύτερο από όλα τα υπόλοιπα.

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

Εφαρμόζεται σε: συγκεκριμένο flex μπλοκ.

Αυτή η ιδιότητα περιλαμβάνεται ως συστατικό μέρος στη συντομογραφία ιδιότητας flex.

Σύνταξη

επιλογέας {
	flex-grow: θετικός αριθμός;
}

Προεπιλεγμένη τιμή: 0.

Παράδειγμα

Τώρα έχουμε δύο flex-μπλοκ με πλάτος 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-direction,
που ορίζει την κατεύθυνση των αξόνων των flex μπλοκ
η ιδιότητα justify-content,
που ορίζει τη στοίχιση κατά μήκος του κύριου άξονα
η ιδιότητα align-items,
που ορίζει τη στοίχιση κατά μήκος του εγκάρσιου άξονα
η ιδιότητα flex-wrap,
που ορίζει την πολυγραμμικότητα των flex μπλοκ
η ιδιότητα flex-flow,
συντομογραφία για το flex-direction και flex-wrap
η ιδιότητα order,
που ορίζει τη σειρά των flex μπλοκ
η ιδιότητα align-self,
που ορίζει τη στοίχιση ενός μπλοκ
η ιδιότητα flex-basis,
που ορίζει το μέγεθος ενός συγκεκριμένου flex μπλοκ
η ιδιότητα flex-shrink,
που ορίζει τη συμπιεστότητα των flex μπλοκ
η ιδιότητα flex,
συντομογραφία για το flex-grow, flex-shrink και flex-basis