CSS Flex Basis (flex-basis) Explained - Beginner Flexbox Tutorial

Front End Beginners

Front End Beginners

Описание видео:

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

Кадры из видео
CSS Flex Basis (flex-basis) Explained - Beginner Flexbox Tutorial
CSS Flex Basis (flex-basis) Explained - Beginner Flexbox Tutorial
CSS Flex Basis (flex-basis) Explained - Beginner Flexbox Tutorial
CSS Flex Basis (flex-basis) Explained - Beginner Flexbox Tutorial
Тэги из видео
Комментарии пользователей:
2023-09-21 19:17:42

Finally, I de-mystrify the flex-item width, thanks a lot.

Raven 鴉
2023-03-19 03:32:07

Best video about flex-basis by far!

bhavya wadhwa
2023-02-19 01:33:44

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;

Bodhi Creative
2023-02-15 01:46:16

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!

Sean Grogan
2022-12-28 10:29:54

Thanks, this was a very useful video

2022-12-17 11:39:02

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

Suene Queiroz
2022-11-28 19:44:37

great explanation. Thank you for that

2022-11-08 22:46:40

Awesome and super imformative! Can you do JSX next please? :)

Tushar Creates
2022-08-28 07:48:22

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)?

Brylle Abella
2022-07-14 06:08:39

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

Mantas Test
2022-06-29 05:15:49

clear and simple, thanks for the video!

Reihan Septyawan
2022-06-25 18:39:27

i was stuck in flex zombies game in level flex-basis, and this very helpful :)

Tadas Čibiras
2022-06-21 00:07:10

The best explanation of all flex tutorials. Keep making great content!

Ling talfi
2022-05-21 11:56:02

best explanation I've found on flex-basis. Thanks.

Really Good Stuff
2022-03-13 16:14:01

Great video 🔥😍

Usagi Akimbo
2022-03-01 04:53:20

Finally clear and easy to understand explanation of flex-basis! Thank you very much!

2022-02-21 12:30:43

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!

manthan patel
2022-02-15 01:29:09

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 :)

Aria Noveiri
2021-12-09 22:18:25

I don't know how to thank you !
It was difficult to understand what flex-basis actually is...
Your explanation was super awesome !

Что ищут прямо сейчас
Neffies троллинг друга сломанным модом red hbiar смерш умирать приказа не было PBWiki Severus Snape Archeage онлайн micke смерть шпионам крым Samyang mekanika Workbench Fix codec ac3 eror on MX Player симбочка пимпочка roidmi eve plus ps1 чиповка icloud clean remove Loud Luxury симба старший симба и хозяин
Похожие видео