 Hello, my friend and friends. One thing I actually struggle in teaching a lot is flex basis and not so much because it's hard to understand. It's more about here's why you want to learn it because for me that's always important and flex basis is one of those things that you can sort of understand that the whole switchy thing we're going to see that in a second what I mean. But then you're like okay but when would I ever use that rather than setting it with their height because a lot of the time you actually want it with their height instead of it's something they could actually switch depending on the flex direction of the parent. It's all kind of weird but I actually found a use case recently and I wanted to take a look at what it is with you and this use case actually came up during like an hour and a half long video. You might have already seen it with the accordions but I figured most people don't want to watch an hour and a half long video or we're building out a big thing just to get one little snippet on flex basis. So I'm condensing it down in this one right here and I've said this really basic example up here where we have a flex container. It switches flex directions right now and some items inside of it and we're going to see the real world situation in a second but just really fast bear with me right now. What we're going to do and very simple we have inline style or whatever embedded styles this thing where it's at the top of the page to do this one. But here like with these items a lot of the time you're just going to stick a width on there and I want the width to be say 500 or 550 pixels just so they actually get bigger and you're happy with that that's what you need and it doesn't matter which way around they are you sort of always want them to be 150 pixels it's kind of mucked up right now because of my heights on the parent here but like what if I don't want the width to be 150 here I want the height to be 150 here and I want the width to be 150 here and that's where flex basis comes in instead. Flex basis will change with the flex direction so here we're getting 150 width and then when I go this way we're actually getting 150 height it's not common you actually need that to happen just because of how squishy and movable and everything on the web is that you want the same height as a width depending on the way they're flipped it sounds kind of practical but when you get into real world applications and stuff at least for me I haven't run into tons of use cases for them which is why I got so excited when I find when I found this example and so what that one was if we jump over to my main here is when I was building out it doesn't look fantastic right now but I was building out a the carousel component like I talked about and that's where I ran into exactly that situation where at smaller sizes they were stacked this way and at larger screen sizes they got they went that way and what was really important for this actually all to work was to make sure that when they were in their shrunk form they were following the border radius the icon that was there and the icon always stays the same size so if I go over to the CSS that I was using if I did let's say at the small ones here I found my accordion so the accordion and then in there is the accordion panel and I could have said height 75 and you can see here it's actually working and I have it no animation right now but whatever it's working and it's doing what I want it to do but then when I'd get to the larger screen size it would sort of break and then I need to go into my media query that I have set up here or I'd have move it down whatever and I'd have to set up another one so when we're going this way things are actually changing left to right instead of changing up and down and again this isn't something that you see all the time but in this situation it worked really well because instead of having to onset the height in the media query and instead of width I could just use my flex basis here and by setting the flex basis there now this way they're following on the width and I've also animated it so it looks a little nicer but the important thing is the closed ones right now are perfectly matching there and then when I shrink down the closed ones are matching in their height and I could do that just by using flex basis and I know that it's going to match regardless of your orientation which was exactly what I needed in this case and so yeah I was super happy that I found it and I wanted to share that with more people than would be watching that really long tutorial with that said though if you do want to go and check out that longer tutorial it is right here for your viewing pleasure and with that I would like to thank my enablers of awesome Enrico Michael Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome