Απληστία με καθορισμένο πλάτος των flex μπλοκ στο CSS
Ας πούμε ότι έχουμε πολλά ευέλικτα μπλοκ. Ας ορίσουμε flex-grow σε 1 για ένα από αυτά τα μπλοκ, και σε όλα τα άλλα στοιχεία ας ορίσουμε ένα συγκεκριμένο πλάτος. Ως αποτέλεσμα, όλα τα μπλοκ θα έχουν ένα σταθερό πλάτος, και το επιλεγμένο μας απληστό μπλοκ θα καταλαμβάνει όλο τον υπόλοιπο διαθέσιμο χώρο:
<div class="parent">
<div class="child elem1"></div>
<div class="child elem2"></div>
<div class="child elem3"></div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
}
.elem2 {
flex-grow: 1;
}
.elem3 {
width: 100px;
}
:
Το χαρακτηριστικό εφέ είναι ιδιαίτερα αξιοσημείωτο όταν το πλάτος του γονέα είναι σε ποσοστά. Σε αυτή την περίπτωση, όταν το πλάτος του γονέα αλλάζει, το απληστό μας μπλοκ θα έχει ένα πλωτό πλάτος, και όλα τα άλλα θα έχουν ένα σταθερό πλάτος:
