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

pytanie zadane 8 czerwca 2018 w HTML i CSS przez Jarver Użytkownik (820 p.)

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ł. ;)

2 odpowiedzi

odpowiedź 8 czerwca 2018 przez sebeks Mądrala (5,300 p.)

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

komentarz 8 czerwca 2018 przez Jarver Użytkownik (820 p.)

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ł.