flex-grow, flex-shrink, flex-basis (quelques exemples)
La propriété flex: est un raccourci pour flex-grow flex-shrink flex-basis
Ces quelques exemples m'aident à voir ce que donnent ces 3 paramètres sur un cas simple. À chaque fois, je ne modifie que la propriété flex du truc 1, et sinon je modifie les contenus des 3 trucs.
Pour la référence complète, voir MDN
flex: par défaut = initial = 0 1 auto
truc 1
truc 2
truc 3
truc 1 avec beaucoup plus de contenu ils tasse les autres, pas sympa !
truc 2
truc 3
flex: 1 = 1 1 0
truc 1
truc 2
truc 3
truc 1 plus sympa avec les autres grâce à basis: 0 il ne les tasse pas
truc 2
truc 3
flex: none = 0 0 auto
truc 1
truc 2
truc 3
truc 1 est inflexible donc s'il a plus de contenu, il tasse et pousse les autres dehors
truc 2
truc 3
flex: auto = 1 1 auto
truc 1
truc 2
truc 3
truc 1 avec du contenu, on ne voit pas la différence avec initial (0 1 auto) puisque c'est le contenu qui "grow"
truc 2
truc 3
truc 1
truc 2 avec beaucoup de contenu pour essayer de tasser truc 1 et j'ai mis flex-shrink à 1 sur truc 1, donc truc 1 se laisse tasser
truc 3
truc 1 avec beaucoup de contenu aussi pour voir comment il réagit
truc 2 avec beaucoup de contenu pour essayer de tasser truc 1 et j'ai mis flex-shrink à 1 sur truc 1, donc truc 1 se laisse tasser
truc 3
flex: 0 0 200px
truc 1 j'ai mis flex-grow à 0 donc il ne grandit pas alors qu'il pourrait prendre la place restante
truc 2
truc 3
truc 1
truc 2 avec beaucoup de contenu pour essayer de tasser truc 1 mais comme j'ai mis flex-shrink à 0 sur truc 1, il ne se laisse pas tasser
truc 3
flex: 1 0 200px
truc 1
truc 2
truc 3
truc 1
truc 2 avec beaucoup de contenu pour essayer de tasser truc 1 mais comme j'ai mis flex-shrink à 0 sur truc 1, il ne se laisse pas tasser
truc 3
truc 1 avec plus de contenu mais avec la basis 200px il n'essaie pas non plus de s'étaler comme basis auto (voir dessous)
truc 2 avec beaucoup de contenu pour essayer de tasser truc 1 mais comme j'ai mis flex-shrink à 0 sur truc 1, il ne se laisse pas tasser
truc 3
flex: 1 1 200px
truc 1
truc 2
truc 3
truc 1
truc 2 avec beaucoup de contenu pour essayer de tasser truc 1 et j'ai mis flex-shrink à 1 sur truc 1, donc truc 1 se laisse tasser
truc 3
flex: 0 1 200px
truc 1 j'ai mis flex-grow à 0 donc il ne grandit pas au-delà des 200px alors qu'il pourrait prendre la place restante
truc 2
truc 3
truc 1 se laisse tasser même avec plein de contenu dedans
truc 2 avec beaucoup de contenu pour essayer de tasser truc 1 et j'ai mis flex-shrink à 1 sur truc 1, donc truc 1 se laisse tasser
truc 3
flex: 1 0 auto
truc 1
truc 2
truc 3
truc 1 avec du contenu et shrink à 0 donc il ne se laisse pas tasser et avec basis à auto, il s'étale bien...
truc 2 avec beaucoup de contenu pour essayer de tasser truc 1 mais comme j'ai mis flex-shrink à 0 sur truc 1, il ne se laisse pas tasser
truc 3
flex: 0 1 auto
truc 1
truc 2
truc 3
truc 1 j'ai mis flex-grow à 0 mais il grandit parce qu'il a beaucoup de contenu et basis: auto
truc 2
truc 3
truc 1 se laisse tasser même avec plein de contenu dedans
truc 2 avec beaucoup de contenu pour essayer de tasser truc 1 et j'ai mis flex-shrink à 1 sur truc 1, donc truc 1 se laisse tasser
truc 3