Ο Παράγοντας Συμπιεστότητας των Flex Μπλοκ στο CSS

Στο προηγούμενο μάθημα ανακαλύψαμε ότι, όταν τα flex στοιχεία δεν έχουν αρκετό χώρο, αρχίζουν να συμπιέζονται. Αυτό, το πόσο το συνολικό πλάτος είναι μεγαλύτερο από το πλάτος του γονέα ονομάζεται αρνητικός ελεύθερος χώρος.

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

Ας κάνουμε έναν υπολογισμό. Ας υποθέσουμε, για παράδειγμα, ότι έχουμε 4 στοιχεία πλάτους 200px. Έστω ότι το πλάτος του γονέα είναι 700px. Αυτό σημαίνει ότι το συνολικό πλάτος των στοιχείων είναι:

200px * 4 = 800px

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

100px / 4 = 25px

Δηλαδή, το πλάτος των στοιχείων θα είναι:

200px - 25px = 175px

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

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

<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;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}