Bootstrap .flex-grow-1 vs .flex-fill

[manolis940]

Θέλοντας σήμερα να ανανεώσω τις γνώσεις μου στην boostrap έπεσα στην παραπάνω απορία. Έπαιζα στον editor του w3 schools και έβλεπα ότι τα 2 αυτά έχουν την ίδια συμπεριφορά. Δοκιμές έγιναν πάνω σε Firefox  118.0.2

Είπα λοιπόν να επιθεωρήσω και να δω τι συμβαίνει στο παρασκήνιο και βρήκα τα εξής.

.flex-grow-1 {
  flex-grow: 1 !important;
}

 

.flex-fill {
  flex: 1 1 auto !important;
}

 

Τα όσα ξέρω στο flex-box ότι οι default τιμές ενός flex-item είναι οι παρακάτω
 

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

 

Για την ιδιότητα flex γνωρίζω ότι:

flex: {grow} {shrink} {basis}

 

Που σημαίνει ότι flex-grow: 1; = flex: 1 1 auto  που σημαίνει ότι .flex-grow-1 = flex-fill.

Ωστόσο μου φαίνεται κουφό να υπάρχουν 2 κλάσεις στην bootstrap όπου κάνουν ακριβώς το ίδιο πράγμα, γι αυτό εκφράζω τον ειρμό της σκέψης μου, μήπως και μου εξηγήσει κάποιος που κάνω λάθος.

[computeras13]

Στην πράξη αν τα πάρεις καθαρά μόνα τους, χωρίς κάτι άλλο να προσδίδει κάποια ιδιότητα, ναι θα έχουν το ίδιο αποτέλεσμα. Αλλά η λογική είναι οτι μπορείς να θέλεις να έχεις πιο fine-grained control σε κάποια πράγματα.

Πχ μπορεί να θέλεις να βάλεις `flex-grow-1 flex-shrink-0` οπότε να μπορείς να πετύχεις το "1 0 auto". Σαφώς δεν το συζητάμε αν θέλεις να βάλεις μέσα στην εξίσωση και το να θέλεις να παίξεις με αυτά σε επίπεδο διαφορετικών breakpoints. Πχ κάτι να κάνει grow σε md αλλιώς όχι.

[manolis940]

19 ώρες πριν, computeras13 είπε

Στην πράξη αν τα πάρεις καθαρά μόνα τους, χωρίς κάτι άλλο να προσδίδει κάποια ιδιότητα, ναι θα έχουν το ίδιο αποτέλεσμα. Αλλά η λογική είναι οτι μπορείς να θέλεις να έχεις πιο fine-grained control σε κάποια πράγματα.

Πχ μπορεί να θέλεις να βάλεις `flex-grow-1 flex-shrink-0` οπότε να μπορείς να πετύχεις το "1 0 auto". Σαφώς δεν το συζητάμε αν θέλεις να βάλεις μέσα στην εξίσωση και το να θέλεις να παίξεις με αυτά σε επίπεδο διαφορετικών breakpoints. Πχ κάτι να κάνει grow σε md αλλιώς όχι.

Περίμενα κάτι πιο σπουδαίο για απάντηση και δεν είδα κάτι τόσο απλό