The thing people get wrong about flex-basis

🎓 Dive even deeper with my 4-hour long flexbox course: flexboxsimplified.com
Flex-basis is one of those things that people sort of, kind of, maybe understand what it does, and I often see some bad advice, like “flex-basis” is just width for flexbox, when that can actually lead to some unintended consequences, so in this video I break down what flex-basis is, and how it’s different from width and height, even though it influences them.
🔗 Links
✅ The code from this video: codepen.io/kevinpowell/pen/Jj...
⌚ Timestamps
00:00 - Introduction
00:49 - What happens when we declare display: flex
01:55 - Adding width to a flex-item
02:40 - Comparing width to flex-basis
03:55 - When we change the flex-direction
06:05 - When min- and max- come into play
07:35 - When we take advantage of flex-basis without realizing it
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@zachjensz]

Flexing that CSS nawlege 💪

[@akosdonko7501]

Kevin you are awesome, i recently started a front end dev training at a big company and after every session I end up watching your channel cuz you just explain everything so much better than these so called "professional trainers". Many many thanks appreciate you!

[@emmanuelameyaw5686]

Thanks man, your videos have helped me a lot in getting confident with CSS. Love u man!

[@codingwithjaybird]

Love your videos! Inspiring to see how your channel has grown 😊

[@itsfarseen]

Hi @Kevin Powell you are the single best beginner friendly resource on CSS on the entire internet. Thank you for your videos. They are informative and simple. They are really good. Thanks :)

[@rpf23543]

I am not madly, deeply in love with CSS yet...but veeeeery curious and eager to fall in love :-) thank you so much Kevin for all your work!!!

[@mrfrontend1]

You have my respect Kevin. I have learned a lot from you...❣Love From Nepal

[@yuriito7292]

Each time amazed! Keep up the good job !!!

[@eduardochernia]

Im doing a HTML/CSS course in Argentina. I ve been suggested to go over the contents again to commit them to memory, before starting JS, which will be as complex (or more). These videos are going te be really useful for that, thank you for the clear explanations and for taking the time.

[@uhman5001]

Mi punto de vista de aprender todo, porque para consejos está tu hermana, es que ni bien aprendas algo, busques una forma de aplicarlo. Si estás aprendiendo como usar Flex o Grid por ejemplo; podés crearte un proyecto y hacerlo, equivocarte mil veces y después ya se retiene. Todo es constancia pero no mires muchos tutoriales, cranea la idea antes y cuando te quedes quemado ahí podés buscar la solución en stackoverflow. Yo aprendí así y ahora ya estoy laburando hace más de un año. Un abrazo querido!

[@AlvinIsChipmunk]

It really depends on the individual because some people do find JS easier than CSS 😂But it's true that it is almost always better to have a solid foundation in HTML/CSS before you move on to other stuff.

[@moshadoe]

Do not worry about committing the CONTENTS to memory. What you need to commit to memory are the basic terminology, such as Keywords, classes, functions, etc... As for things like width, flex-basis,etc... It is more important to know they exist, and to just google for your specific problems. A big misconception about programming is that you are coding all the things from memory. Programming is more of a mindset. The ability to know what the problem is, then using your resources to find a solution. This is why the joke about programmers just Googling and using StackOverflow exists.

[@CristianRodriguez-zn4wp]

@@uhman5001 Tienes razón. Aunque mirar tutoriales puede servir más para refrescar conocimientos. En ese sentido puede ser útil.

[@blackpurple9163]

JavaScript is even more complex, if HTML is level 1 and css is level 5 JavaScript is like above 10🤣

[@abhishekrawat8579]

in my early phase of learning your tutorials helped me alot...and learned alot from you ❤ and it's been a 1.5 years being a frontend developer still in love with CSS and I hope you will bring more interesting videos in future too....

[@silverfullbuster9177]

Whats your thought on AI and the future of developers? As an aspiring junior web developer, Im not sure.

[@kamasahdickson1549]

It kinda funny😂 and i think other tutorials on KZbin like 99%😂 that i watched when learning flexbox dont understand this concept you explained.

[@maddin187er]

I'm a simple man - I see a video from Kevin, I give a like

[@kalahari8295]

Damn I love videos like this soooo much ❤️🔥

[@un_defined]

that's really interesting things you explained

[@vavilov2212]

Thanks!

[@soroush1984]

Thank for your video. So you mean it'd be better to avoid flex-basis and use width/height instead?

[@arshad1781]

Thanks 👍

[@gurgen5165]

Hi Kevin! I've been following your channel for almost three years now and I know you have done some projects in the past using scss/ sass, but lately I haven't seen any styling languages except CSS. I've recently (today) started using sass, and before I "trap" myself with sass I'd like to know you're opinion on it and if it is worth using, is it better just to stick with CSS or should I commit to the switch?

[@GustvandeWal]

You will find that you are NOT shooting yourself in the foot by committing to Sass. Sass turns into native CSS, just like how Typescript turns into native JS. There are merely developer-oriented features in them, which will speed up and simplify your development. It's always a good idea to know the native stuff, but Sass isn't much different from it. Take the nesting that Sass provides: just use it and see what the resulting CSS is. If you do it that way, you will learn how exactly you benefit from Sass and make it possible to switch back to native. You also don't have to be afraid of being stuck, because Sass compiles into CSS, which means you can always ditch Sass and resume using the native results. That, AND, Sass features could very well slowly be standardized and added to CSS, just like how jQuery features slowly became native ones. Use Sass. It's awesome 👍

[@gurgen5165]

@@GustvandeWal Thanks, very good and understandable reply. Probably the best comment I’ve ever seen on KZbin 😅

[@GustvandeWal]

@@gurgen5165 No problem and thank you 😁

[@ralacerda12]

Great video. But can you shrink the flex container to fit the width of the flex items (if you set a width or flex-basis for them)?

[@glowbug-clashofclans9116]

If you set the container to have a width: max-content, then the width of the container will match the width of the children inside. (+padding and margin obv)

[@ralacerda12]

@@glowbug-clashofclans9116 Thanks for the reply! I spent one hour ealier today trying to do it.♥

[@GustvandeWal]

I thought this video was going to be about the way flex-basis influences the growing and shrinking of elements. Near the end, for example, when you added flex: 1;, I thought you were going to show the gotcha of having flex-basis set to 0. In this sense, saying that flex-basis: auto; "looks" to the width/height you had explicitly set with CSS, is a bit misleading. flex-basis: auto; will look at the rendered dimensions, equating auto to min-content. Again, this ties into the fact that with width: 300px;, flex-basis does not become that. The answer to that quirk lies in the flex-grow and -shrink properties and is the reason flex: 1; works in the first place. Would love to see you a quick follow-up on this!

[@WanderingCrow]

Greetings! Do you have (or plan to have?) the same kind of course than "Flexbox Simplified" but for Grid? 'Cause I'd be interested in that too. Please and thank you, and have a great day :)

[@Rocadamis]

Clear as mud. I understand width, height, min/max-width & height, but (for me) what flex-basis actually DOES is essentially undefined here and still confusing to me.

[@KevinPowell]

It acts as width when the flex-direction is row, and acts as height when the flex-direction is column :)

[@Rocadamis]

@@KevinPowell I wish that helped. "Acting" as width and height doesn't really inform me of WHAT it's fundamental purpose actually is. Knowing this would help me in determining HOW I would use it in CSS. It's called "flex-basis" but what is it a "basis" OF?

[@lp26197]

Hello, I want to ask you. I am a front-end developer. Is this field good in terms of the job? I have 4 years, and you are from the university. What do you advise me to learn something else besides the front-end so that I can find a good job in the future? Thank you

[@nadiac6938]

hey kevin, what year did you build your first website :) :) :')

[@rickardelimaa]

20 views and 16 likes after 1 min. Pretty impressive. :D Even more impressive is that Zach Jensz that wrote a comment 1 day earlier than this video came out.

[@KevinPowell]

Patrons get early access to the videos :)

[@windmaomao]

to summarize: `flex-basis` is useless. Sorry this video is awesome, really helping us understand what's going on.

[@kamasahdickson1549]

I wish one day you do a video about the significance of grid template rows😂...I don't know but I don't use it in 99% of projects that I do....and that alone makes me feel I don't know grid yet😂

[@healinbeet]

he's got a whole video on grid, i'm sure he talked about template rows/columns in there. do check it out :)

[@bananenkotze]

I‘m not sure what your where trying to explain in this video.. i‘ve always been using flex with width, never with flex-basis, and it seems that that was the right choice? i was expecting something cool or new with flex-basis, instead you‘re saying i shouldn‘t use it (in 99% of the cases)?

[@noorulhuda1661]

Thanks Kevin got flexbasis

[@michielderuyter8024]

4:28 "I am not going to worry why the width is stretched out" you could have mentioned that the default value for align-items is stretch

[@jasonbourne757]

What if flex item doesn't have any content or height or width? Suppose, there is a flex container with a width and height of 400px, I create 9 empty flex items inside, and these items do not have any content, width or height. Will the flex basis make these 9 items fit the container ?

[@fumast3rmasteroffu716]

Dear Kevin. I really love the content of your videos. But I have one big wish. Please concider having darker/darkish background colors as background color of you html content. I am having a hard time viewing anything with bright or white background. And if youtube videos have white background I can invert the colors of my screen. But most all your videos you have the code on a black background and the html content on a white so reversing the video just mean I lose the code or vice versa. So it would make wonders for someone with bad eyes as me if you could keep code background and html background content in darker colors. Keeping fingers crossed. And a big thanks for all the wonderfull content you create.

[@KevinPowell]

Noted! I often just roll with the defaults because it's fast, but super valid point and I'll look to update my starting demo files!

[@zyniguitar]

As a beginner programmer should I learn HTML/CSS , python or C ?

[@KevinPowell]

Depends on what you want to do? HTML/CSS is for front-end of websites, Python is used for backend of sites, AI, and a few other things, and C (C++, etc), is more of a general purpose language used to make software and some other stuff too. All very different, and very dependent on what type of development you want to do.

[@Spytie1]

doesnt kyle from webdevsimplified have copyrights on flexboxsimplified ? :P

[@KevinPowell]

he has all the other ones, he missed his chance on that one. I'll sell it to him for the right price though :D

[@lookupverazhou8599]

Thumbs up!

[@_daniel.w]

Currently learning web development, it's quite fun with Vue. It's the only one I like, I've tried many, but Vue is the only one I really enjoy using. Anyways, I'm early :)

[@ralacerda12]

Same. Vue clicked with me in a way that React did not.

[@isasayyed5777]

I didn't even know flex-basis exists

[@anthonynjoroge5780]

Wait, is it "my front-end friends" or "my friend and friends"🤔

[@user-cx6ec2kp6u]

I just heard flex bzos over and over again

[@sajedsoliman4780]

Simpilified. Hmmm. That's Kyle's brand 🙃

[@VanegeEsperanto]

Thanks, I will never use flex-basis.

[@KevinPowell]

It has it's use cases! It's just important to know what it's doing :D

[@arjix8738]

You said Plex instead of Flex in the first minute

[@coolworx]

We need to figure out a way for the AI's to distill the essence of Kevin into an algorithm so that we can create that cool "learn anything" tool from the Matrix.

[@christophersatterfield4260]

I think I’m really good at scss until I watch KP 😅.

[@elvispalace]

PhD in CSS

[@0neAl0neRPubg]

did not see any difference