I’ve been a dev for a decade. Professionally for half of that. These properties have always been a bit fuzzy to me, in spite of TONS of content I’ve consumed. Your explanation here - “three times faster” - has straight up changed my life. Total eureka moment. Thank you! MAKE MORE CONTENT!
The is an inline element (i.e. its display property is set to "inline" by default), which means that the element's size is determined only by its content (that's why setting its width or height has no effect). If you want to be able to set a 's width, you need to set its display property to "inline-block" (or "block" but in that case I would use a instead).
I think that’s the JavaScript he mentions - the ID of each box is captured in some JS using getElementById and THEN using offsetWidth. He captures the resulting number and displays it in those little text fields with a JS variable (use “let” not “const”). Even easier with React!
That is tricky. If the browser viewport is stretching wider, the item with flex grow 3 will grow at 3 times the rate of the other flex items. I generally only use flex grow of 0 or 1.
I’ve been a dev for a decade. Professionally for half of that. These properties have always been a bit fuzzy to me, in spite of TONS of content I’ve consumed. Your explanation here - “three times faster” - has straight up changed my life. Total eureka moment. Thank you! MAKE MORE CONTENT!
Great Video. Love yoour tone and speed on teaching this content! Subscribed and looking forward to more videos
"Display: Flex" is amazing. Why are there so less people talking about this cool feature.
i think, viewport is quite easy compared to flex maybe thats the reason flex is kept on the side....
Great explanation and presentation!
Goood explanation.............understood clearly....thank you so much.....
thank for your video. God bless you
perfect explanation
Very well explained!
Thank you so much, I was really confuse I’m flex. and flex. grow especially
Hell yeea, awesome content man! thank you
i just started learning
Hi Thanks for this valuable information.
Sir how you can changing the width in the .
The is an inline element (i.e. its display property is set to "inline" by default), which means that the element's size is determined only by its content (that's why setting its width or height has no effect). If you want to be able to set a 's width, you need to set its display property to "inline-block" (or "block" but in that case I would use a instead).
@@mgerry1992 Thanks you it's nice to replying .
Thanks for great video. How did you code to automaticly figure out the width of each box?
I think that’s the JavaScript he mentions - the ID of each box is captured in some JS using getElementById and THEN using offsetWidth. He captures the resulting number and displays it in those little text fields with a JS variable (use “let” not “const”). Even easier with React!
Hi I found the way thank you very much.
Thanks for the video..!!
That menubar.... oh god... i can't take it.
that was helpfull no cap
nice nice nice pleaes keep up
please make a full responsive web tutoria
4:10 what would "three times faster" mean???
That is tricky. If the browser viewport is stretching wider, the item with flex grow 3 will grow at 3 times the rate of the other flex items. I generally only use flex grow of 0 or 1.
@@SixMinutesSmarter Thanks, for your response.