Ρύθμιση της Συμπίεσης των Flex Μπλοκ στο CSS

Από προεπιλογή, από όλα τα στοιχεία αφαιρούνται κομμάτια, ανάλογα με το πλάτος του στοιχείου. Ωστόσο, είναι δυνατόν κάποια στοιχεία να συμπιέζονται περισσότερο ή λιγότερο. Για αυτό υπάρχει η ειδική ιδιότητα flex-shrink.

Αυτή η ιδιότητα αντιπροσωπεύει ένα βάρος, με το οποίο πολλαπλασιάζεται το πλάτος του στοιχείου κατά τον υπολογισμό του κομματιού που θα αφαιρεθεί, σύμφωνα με τον παραπάνω τύπο. Για παράδειγμα, αν το πλάτος ενός στοιχείου είναι 200px, και το flex-shrink του είναι 3, τότε το σταθμισμένο (δηλαδή πολλαπλασιασμένο με το βάρος) πλάτος του στοιχείου θα είναι:

200px * 3 = 600px

Ο τύπος, λαμβάνοντας υπόψη το flex-shrink, θα έχει την ακόλουθη μορφή: αρν. ελ. χώρος * (σταθμισμένο πλάτος στοιχείου / άθροισμα όλων των σταθμισμένων πλατών των στοιχείων).

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε 4 στοιχεία. Ας υποθέσουμε ότι το πλάτος του πρώτου στοιχείου είναι 400px, και το flex-shrink του είναι 2, το πλάτος των υπόλοιπων στοιχείων - 200px, και το flex-shrink τους είναι 1. Ας υποθέσουμε ότι το πλάτος του γονέα είναι 900px.

Το συνολικό πλάτος των στοιχείων είναι:

400px + 3 * 200px = 1000px

Ο αρνητικός ελεύθερος χώρος θα είναι:

1000px - 900px = 100px

Το συνολικό σταθμισμένο πλάτος των στοιχείων είναι:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Το σταθμισμένο πλάτος του πρώτου στοιχείου είναι:

400px * 2 = 800px

Από το πρώτο στοιχείο θα αφαιρεθεί το ακόλουθο κομμάτι:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Το πλάτος του στοιχείου θα είναι:

400px - 57.14px = 342.86px ~ 343px

Το σταθμισμένο πλάτος καθενός από τα υπόλοιπα στοιχεία είναι:

200px * 1 = 200px

Από κάθε στοιχείο θα αφαιρεθεί το ακόλουθο κομμάτι:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

Το πλάτος του στοιχείου θα είναι:

200px - 14.2px = 185.8px ~ 186px

Υλοποιήστε τα πιο πάνω μπλοκ και ελέγξτε με μέτρηση ότι το πλάτος των στοιχείων θα είναι πράγματι ίσο με αυτό που υπολογίσαμε.

Υπολογίστε το πλάτος των μπλοκ και στη συνέχεια ελέγξτε τους υπολογισμούς με μέτρηση:

<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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 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: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-shrink: 3;
}
.elem2 {
	width: 200px;
	flex-shrink: 2;
}
.elem3 {
	width: 200px;
	flex-shrink: 1;
}
.elem4 {
	width: 200px;
	flex-shrink: 1;
}