Flex - flex-grow/flex-shrink/flex-basis

Question

Dzień Dobry! Tym razem mam pytanie o:

flex:1 0 10px;

Kolejno: flex-grow / flex-shrink / flex-basis

Mam pytanie jak te atrybuty maja się do siebie... Nie za bardzo rozumiem różnicę między nimi, gdyby ktoś miał czas i mógł mi to rozpisać wytłumaczyć będę mega wdzięczny. Pozdrawiam cieplutko Michał. ;)

Answer 1

Flex-basis to bazowa szerokość elementu (np. 200px)

Flex-grow wypełnia ponad szerokość elementu pustą przestrzeń gdy ma wartość 1, dla wartości 0 nie wypełnia pustego miejsca, dla wartości 2 wypełnia dwa razy szybciej pustą przestrzeń niż inne elementy z wartością 1

Flex-shrink to samo ale chodzi o zwężanie elementu. Wartość 1 pozwala zwężać, wartość 0 nie pozwala zmniejszać elementu, wartość np. 5 będzie kurczyć element 5 razy szybciej niż inne elementy ustawione na 1

Comments

Dziękuję za zwięzłe rozpisanie tego Sebastian :D myślę że grow i shrink już rozumiem to basis jest dla mnie jeszcze trochę niezbyt intuicyjne, może wyjdzie w praniu jak się tym bawić, ale bardzo dziękuję Ci za pomoc i zaangażowanie, jak by co będę pytał.

Answer 2

wlasciwosci-dzieci-flexa

Comments

Dzięki bardzo, bardzo za ten link mega przydatny! :)