Get full control the size of your elements flex-grow, flex-shrink and flex-basis All videos + exercises → Flexbox.io
Пікірлер: 83
@i-heart-google71324 жыл бұрын
Bro, you're better than the official documentation and all those lame tutorials combined! Great work!
@jarrychen20962 жыл бұрын
I spent a lot of time reading the documentation, but eventually understood it in your ten minutes video! So incredible.
@ajcics6 жыл бұрын
You're an incredible teacher. Thank you
@arifulislamadil42953 жыл бұрын
i have watched lots of youtube videos about flex-grow and shrink., i really didn't understand them properly after i watched this it's gave the clear concept about flex-grow and flex-shrink.Thank you very much Wes Bos
@suyashpurwar83103 жыл бұрын
This video was really helpful! Helped a lot! I was very confused when it comes to these three properties. Thanks a lot!!
@Powerful-Manifestor-2 жыл бұрын
Watching all other videos, I wondered why the width of one is not in proportion to the other. You made it so clear that the extra room is divided in that proportion. Awesome! Two questions: 1. What is flex-basis when flex:1 is used? 2. What is the difference between using width vs flex-basis on a flex item?
@rafayzia41802 жыл бұрын
love your gentle voice bro ! thank you :)
@matthewbell52824 жыл бұрын
Really, really well explained - thank you!
@nellypolly6639 Жыл бұрын
this video gave me more understanding of flex shorthand. Thank you
@debi1992 жыл бұрын
thanks for all the efort and love
@Stone_6244 жыл бұрын
This is a beautiful explanation, Thank you!
@ankurc4 жыл бұрын
Thank you. You made it very clear!
@StrangeIndeed3 жыл бұрын
I had to refresh my memory about flexbox, and this video was great for that, thank you c;
@shivarammuthukumaraswamy71643 жыл бұрын
Thank You so much for the clear explanation
@prajwalpandeshwar99677 ай бұрын
Thankyou so much for such an easy explanation!!
@HarpreetSingh-vf6lu7 жыл бұрын
Can you explain the math of why we use 1? What calculations are done for use to know which number to use and what it does for flex grow? Thank you.
@lddonovan8 жыл бұрын
Great tutorial!
@ronishlopchan20202 жыл бұрын
great content!
@dudakoff1000 Жыл бұрын
You are a gem. The CSS tricks article dedicated to this topic failed me this time
@ahmedam7711 ай бұрын
great video!
@boiiiiiiiiiiiiiiii2612 Жыл бұрын
thank you for the explanation.
@amr199320122 жыл бұрын
Simple and informative, Thank you !
@suridchakma44033 жыл бұрын
Your style of describing is super 🔥
@steelo22142 жыл бұрын
yah that’s it. subscribed!
@Undrios Жыл бұрын
thank you!
@montecristo7963 Жыл бұрын
Thank you that was really helpful
@abstractdavis4 жыл бұрын
Thanks a lot, very clear explanation
@fondungallahkondem29233 жыл бұрын
thank you so much
@graceji40827 жыл бұрын
awesome tutorial!
@Free--Soul3 жыл бұрын
great job
@neozhang87004 жыл бұрын
excellent explanation~~
@Dorff_MeisterАй бұрын
Very helpful. Thanks.
@ted20912 жыл бұрын
explained it perfectly, thank you
@jaredsimon37312 жыл бұрын
Thank you sir. This was great.
@LongNguyen-op7ls4 жыл бұрын
Very good tutorial man ! These flex things was annoying me for hours
@uimonk3 жыл бұрын
you are awesome..
@codeme8016 Жыл бұрын
Good tutorial. You can also enable the browser's responsive "toggle device toolbar" tool e.g. Chrome to resize the frame instead of resizing your entire browser window.
@blueapple91353 жыл бұрын
Thanks for well explained.
@codesiddhi Жыл бұрын
👍well explained, thanks :)
@dijanad60214 жыл бұрын
good explanation!
@barrbudo8 жыл бұрын
What's the extension you are using for informing the screen dimensions? The ones I've found so far do not work if I'm working with a local file :(
@toddjudd95528 жыл бұрын
+Barbudo view port dimensions available in the chrome store here: chrome.google.com/webstore/detail/viewport-dimensions/kchdfagjljmhgapoonapmfngpadcjkhk/related?hl=en-US
@barrbudo8 жыл бұрын
Todd Judd Thanks :)
@pilloIMNG Жыл бұрын
Great explanation! I now understand more about these properties, thank you! I gotta note that the intro is very loud and your voice is very low, but this video is 7 y o so might have changed.
@majdalkwaja97924 жыл бұрын
Thanks bro
@nasko7177 жыл бұрын
Thanks!
@jasserlabiadh70122 жыл бұрын
bro thaaank youuuuuuuuuuuuu ily
@nailalzuhairi26905 жыл бұрын
u r brilliant
@austinethridge27715 жыл бұрын
Thank you sir! I understand it now
@ek4m815 жыл бұрын
that's good
@henriquemagno9326 Жыл бұрын
thanks
@dvidalv3 жыл бұрын
excelent!
@cashpay503 жыл бұрын
subscibed!
@l3tk1ll7 жыл бұрын
ty
@juniorusca6023 жыл бұрын
I love this explication
@williamjamesrapp73564 жыл бұрын
Looks good You do a fair job of teaching this BUT what happens when I type in What you type in and IT STILL DOES NOTHING ?
@shotbylowie4 жыл бұрын
check if you linked your css correctly in your
@Johann.Liebert2 жыл бұрын
thanks :D
@friend13108 жыл бұрын
Hi Wes, can you please use fractions to express how much an element is giving away of its width when using flex-shrink? I think I don’t get it. You use flex-basis:400px for both .box1 and .box2. So, when the container is 800px wide, each box is 400px wide. Then you use flex-grow:10 for .box1 and flex-grow:1 for .box2. So, when the container gets wider than 800px the extra room will get split between the elements using the ratio we set for flex-grow. My understanding is that .box1 gets 10/11 of free space and .box2 gets 1/11. So yes, .box1 gets 10x more extra space than .box2. But how does this work with flex-shrink? We used the same values for flex-shrink as for flex-grow, but obviously .box1 is not giving away 10/11 of its width when the container gets below 800px. Thanks!
@friend13108 жыл бұрын
I think I got it, but I am not sure if I'm right. I think that if the container gets for example 700px wide the .box1 and 2 miss 100px, they just can't be 400px each any more. So, they have to split the 100px using the ratio above, meaning .box1 will be narrower by 100*10/11~90.91px and .box2 will be narrower by 100*1/11~9.09. The new width of .box1 will be 400-90.91=309.09px and the width of .box2 will be 400-9.09=390.91px. Now .box1 and .box2 (309.09+390.91=700) exactly fit 700px wide container. Can somebody confirm my theory? :D
@friend13108 жыл бұрын
Yes, that's how it works. I just checked it using web inspector.
@HarpreetSingh-vf6lu7 жыл бұрын
Hey, can you explain the math behind this please of how flex-grow works, hard to find online.
@chome46 жыл бұрын
How do you apply 'wrapping' to force the second box onto the second row?
@ycombinator765 Жыл бұрын
Wes is the Boss
@EquinoXReZ3 жыл бұрын
Fire
@WILLGYS2 жыл бұрын
Man is for box, not the container! that's why it wasn't doing anything. Thanks Wes
@haley80043 жыл бұрын
Someone know what this means? I have no idea. "kind of look at your layout and intelligently figure out how big these other ones should be"
@NanarStudios2 жыл бұрын
Helpful, but you have to watch in 1.5x speed for it to almost feel like a normal speaking speed
@MikeMike-ms1ns3 жыл бұрын
why is there bullshit like if you are in the 10th level div you can't set it to use the remaining space but need to put display flex on every level of div above it? Shouldn't immediate div be enough?
@Bruce-Baum2 жыл бұрын
way better explanation than codecademy
@igu642 Жыл бұрын
❤❤
@BohemianOnTheRoad7 ай бұрын
omg its 8 year ago
@tabniletley26434 жыл бұрын
i actually really like the intro. it's so 90's!
@afaque.4 жыл бұрын
what if he started again making these intros in his new videos...that will be
@armandoperez95287 жыл бұрын
Oh my god, this intro is soooo annoying. It is still a great tutorial.
@SuperKojota6 жыл бұрын
Stupid whisper.
@leakyabstraction3 жыл бұрын
Pretty sure all the downvotes are the result of that intro. I was so annoyed... Started to wonder if there is something seriously wrong with me to find it that annoying; but then I saw your comment.
@spencerwasden51553 жыл бұрын
@@SuperKojota did you mean "whistle"? If so I agree--it actually hurt my ears. But great tutorial!! Thanks @Wes Bos
@amirhossein79843 жыл бұрын
Just play at 1.25x speed.
@Rivederchee2 жыл бұрын
this left earrape
@napolunatico6 жыл бұрын
I think this is not completele well explained. Why? Because when you give flex-grow or flex-shrink to an element you do not make 'x' times bigger than the other one, you are just using 'THE AVAILABLE SPACE', and dividing it in many spaces as you have given to the summary of all the elements, and from this point the browser gives the size to every element according with the number of flex-grow o shrink that you gave to it every single element. (My english is not good enought sorry). Bless!