Одну секунду
Что-то сучилось. Попробуйте еще раз.
In this tutorial, we look at how the "flex-basis" property works in CSS Flexbox. "flex-basis" determines the initial starting size of a child flex item before either flex-grow or flex-shrink have been applied to it. All flex items are given a default flex-basis value of "auto", which means their initial starting size is based either upon their "min-content" width, or an absolute width if already specified elsewhere in the CSS. "flex-basis" accepts any size value, such as pixels, relative units, or percentages. "flex-basis" can also be given a value of 0, which means the browser ignores a flex item's initial size when calculating how much space it should occupy inside its parent container, if re-sizing with either flex-grow or flex-shrink. All of the examples in this video use the default flex-direction of "row", however the principles remain the same when using a flex-direction of "column". Just be aware that the height of the flex items will be affected, rather than the width. I hope you found this video helpful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible. TIMESTAMPS: 00:00 Introduction 00:24 What is flex-basis? 00:51 Understanding flex-grow 02:09 Understanding flex-shrink 03:32 The default flex-basis value of "auto" 05:00 Setting a flex-basis value other than "auto" 06:42 Using individual flex-basis values on individual flex items 08:54 Using a flex-basis value of "0" 10:53 Working with "flex-direction: column" 11:21 Summary WATCH NEXT: • CSS Flex Direction (flex-direction) Explained - 🤍🤍youtube.com/watch?v=m7sGfDfll1E • How to Perfectly Center an Element using CSS Flexbox - 🤍🤍youtube.com/watch?v=6fCwYyvTEk0 • How to Create a Sticky Footer using CSS Flexbox - 🤍🤍youtube.com/watch?v=8lx3V5mkJN4
Finally, I de-mystrify the flex-item width, thanks a lot.
Best video about flex-basis by far!
At qdf9Qa0xJe4&t=10m15s 10:15 you said that "when using flex-basis:0; the browser will ignore their initial size when sharing out the total width of the container and each item will end up the exact same size.". This is somewhat incorrect.
--> Here flex-basis is not the real reason why items turn out as equal size. You can achive the same result by applying width:0 or or that matter any equal width say 10px or 20px to all the items. Flex-grow is the actual reason why they grow out to be of equal size. flex-basis just sets their width to 0px;
Thanks so much, you couldn't have explained this better! These flex-basis options are tricky concepts to grasp, but thanks to you I was able to implement this in combination with a flex-children wrap in-between breakpoints to achieve a much better layout for my tabs component - thanks a bunch!
Thanks, this was a very useful video
Your are the best one who is explain flex-basis .. I find issue for what is actually flex-basis does but the explain really help me.. Thank you so much
great explanation. Thank you for that
Awesome and super imformative! Can you do JSX next please? :)
I don't know how to get this. I have some doubts like -
1. What's exactly the flex-basis property is doing what the width property can't do?
2. All the stuff I've gone through explaining flex-basis, they mentioned that it was used to set the initial width/height. What does this actually mean. Why not just set the width/height (depending on the flex-direction)?
Thank you so much for this clear explanation! I was having a hard time following The Odin Project's discussion of flexbox so this is a lifesaver
clear and simple, thanks for the video!
i was stuck in flex zombies game in level flex-basis, and this very helpful :)
The best explanation of all flex tutorials. Keep making great content!
best explanation I've found on flex-basis. Thanks.
Great video 🔥😍
Finally clear and easy to understand explanation of flex-basis! Thank you very much!
Thank you very much!!! the clearest answer on the internet!! I finally understand this flex-basis =D I found a lot of explain on the internet, no one can explain this better than you!
thank you Tom :) .... there is no better explanation possible !!! you are genius :) , I've learned so much by watching your videos. The one I won"t ever forget is the video in which you describe the difference between align-items and align-content . I was stuck with that topic and you explained it so so well !
I have one small request ...please make video on media queries. Thank you so much again :)
I don't know how to thank you !
It was difficult to understand what flex-basis actually is...
Your explanation was super awesome !
.svg){kind=small}
