I finally found a great use-case for flex-basis!

Flex-basis is one of those properties that seems like you should use because you’re using flexbox, but often, width (or height) are more useful. Every now and then though, you run into the perfect use-case for it, and that recently happened to me and I wanted to share it with you!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:47 - A simple example of how flex-basis works
02:14 - Using flex-basis in a real-world situation

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[chrisbolson]

Another advantage, as you mentioned in the original video, is that flex-basis can be animated.

[programmingjobesch]

I hate short videos. This one was great. Genuinely perfect length video per the subject matter.

[Wolfendeathx]

If I had watched YouTube first thing this morning instead of coding, I could've saved myself a couple of hours trying to figure this out myself lol

Good vid as always ^.^

[tomiaiyeniko]

Wow, nice finding. I've been using it as an alternative for basic width on flex items, never thought of this 😅

[bisodrt]

I just wanted to say that i apreciate so much the detail of turn the HTML body into dark mode. That's make all difference between watch the video or avoid it. Thanks!

[kopilkaiser]

Amazing tutorial. I found this video very helpful and useful. I find flex to be easy, intuitive, and very useful now. All thanks to you☺️👏

[aamiramin]

Brilliant real-world example. Thanks for sharing Kevin.

[paulm.]

I was just looking at ways to make this layout pattern in a simple way 😅 great use case for flex-basis!

[justme]

Wow
I'm yet to need this buh thanks for sharing this. It'll definitely gonna be in handy.
Thank you so much

[joshuaberrios]

What a clutch use case. Glad you had a video on this. I, too, was just met with a use-case scenario hahaha

[arandomguy]

Yes, i used this method to animate these kinda cards a few months ago.

[erena]

I used flex basis once two days ago like a solution to a problem and now this video shows up, it's chasing meee

[artu-hnrq]

Really interesting to understand that, thanks for the sahring!

[allenwang]

that's very useful in this condition !!!

[sdfsfsfd]

Very useful explanation! Many thanks. Muchas gracias, me ha servido mucho.

[daishzen]

Something that always annoys me with flex is that inputs don't respect flex shrink unless you explicitly set a width/height (depending on direction), and always ignore flex-basis. Is there any way around that?

[Technophle]

Hi, Kevin!
I have a video request on animation with grid. Would love to see how you would approach to it.

[sbtopzzzlg]

I once used "flex-basis: 0; flex-grow: 1" for divs inside a flexbox to make sure they are evenly sized regardless of the child size... Not sure if it's the best way to do it though 🙃

[MichaKurzewski]

whenever i/we style something and I talk to my collegues I say somethingg like: yea you know, i've seen CSS King do this recently this way. They are like: who?... and i dont remember your real name cause in my head youre CSS King :D

[shahidshafi]

I would like to see a video upon how we can write minimum css/scss for a website with dark and light mode