flex or flex-grow | Sololearn: Learn to code for FREE!


flex or flex-grow

i am using a flex to adjust a width for these element; main, .aside1, .aside2. a page comes as i expected. as i know flex is a shorthand for flex-grow, flex-shrink, and flex-basis. because a first shorthand for a flex is a flex-grow, so i try to change a flex to flex-grow to makes width adjustment for some elements. hoping it will give a same results, but a results are not as expected. This is my code: https://code.sololearn.com/WR0hbwfhR2eB/?ref=app This is how it looks when flex change to flex-grow: https://i.ibb.co/PZsHSM7/flex-or-flex-grow.png I change flex with flex-grow : https://i.ibb.co/PrbZdXg/flexeded.png

9/5/2020 4:19:05 PM

Dec Fathani

2 Answers

New Answer


Good question https://developer.mozilla.org/en-US/docs/Web/CSS/flex#%3C'flex-grow'%3E One-value syntax: the value must be one of: a <number>: In this case it is interpreted as flex: <number> 1 0; the <flex-shrink> value is assumed to be 1 and the <flex-basis> value is assumed to be 0. So, Add flex-shrink: 1; and flex-basis: 0; and you should see outcome same as flex: 1; https://code.sololearn.com/Wko1dtuqMdbM/?ref=app


Gordon i think flex-grow, flex-shrink and flex-basis doesn't always works if written as single line. It's 'safer' using a flex shorthand i think Thanks for replying n solutions suggestions