 FlexBasis is one of those properties that people sort of kind of maybe get but it's also one of those don't ask me to explain it things. So in this video I'm going to be breaking down FlexBasis and trying to get to the bottom of how it actually works because when we use FlexBasis as a replacement for width for flex items sometimes it might have some unintended consequences. Hi there my friend and friends thank you so much for coming to join me once again and if you're new here my name is Kevin and here my channel I help you fall madly deeply in love with CSS and one of the best ways to become less frustrated with something is to go from the wishy washy hand wavy it works sort of if you do this distrust me to really understanding how something works so you can use it properly. So let's jump right into the code I have a code pen opened that is right here and I have this really simple example we're going to be using just to really understand what's happening because the simpler it is in a situation like this I think the more it makes it actually understandable even if it's not necessarily a super realistic situation obviously. So the first thing is I have set up a row here any column here because we're going to be playing with flex direction a little bit. Before we get more too much about that though we're going to say that both my column and my row have a display of flex on them and we're going to see the first thing that happens is the items in there shrink down so when we do a display flex items go from being the width auto block level elements that are just stretching and filling all the available space to having a width that's more like content size and that's because of the flex shrink that is on by default so they shrink down to be as small as they can possibly get to with the content that is inside of them and just to help visualize things and separate them we'll throw a gap on there as well perfect. So with that in place what we can do is come down and we have the column here I'm going to switch that in a second but first let's put a width of 200 pixels on here because this is something people will often do and there we go we can see they actually have a width of 200 or we can do 300 or whatever we want you set a width and it works and this is for my flex item so the flex item is in both of these we see them right there. So they're getting the width that I'm telling them to get and that's because when we use a display flex as I said they'll shrink as small as they can get based on their content size my width here is what is declaring the content size so they want to be 300 pixels now because they are flex items they can actually shrink below that but for the most part that's like the ideal size it's how big they want to be as long as there's available space for them and if I go and I set a flex basis here basis nothing actually changes it looks exactly like width and if I make that 200 now they will be 200 pixels wide and so this is where flex box and a flex basis gets that well it's just width for flex box don't use width use flex basis because it's what you should be using because they're flex items and as I said that does not tell the entire story so let's put this back up to 300 and just for fun let's make this a width again and if we don't have a flex basis set flex basis the default is going to be auto and so as soon as something is a flex item it will have a flex basis on it and it will have a flex basis of auto that auto means actually just go and look at what the width is so an important thing there is the it's sort of based on the width but not all the time we're going to get there it's kind of weird though but that means if you use width width is going to work how you expect it to because the flex basis is getting that value from there anyway the spec on how flex basis auto work works has changed over time but that's basically what's happening at this point now where things get different is when we change the flex direction though and watch this if I have width 300 on both of them and I change the flex direction nothing major happens the only thing is now the stack on top of each other because that this is my column so flex direction column each one is an individual row now we've changed the flex direction so they stack instead of going next to each other where things get interesting is instead of having a width here if I make this a flex basis things are going to get a little bit weird where look at that what just happened and there's quite a few things that just happened first they they got really wide but they also got really tall why is this happening I'm not going to worry so much about why the width has stretched out but the height of them is now hit 300 because of the flex basis here and the flex basis is based on the main axis so on this first one over here these are getting a width of 300 and on here the flex basis is a height of 300 because when we change the flex direction we're changing the main axis along with that so the main axis goes from horizontal to vertical so flex basis changes between the two of them and that's why I said that sometimes it doesn't tell the whole story and you often will get unintended consequences when you play with set values on your flex basis property and sometimes you might want this behavior there are very few situations that can come up where you actually want to play with that and for the layout it works that you're setting it as a height in this situation but a width in this other situation but 99 percent of the time I think that's not actually the case and you're probably better off leaving flex basis as auto and setting a width of 300 and I wouldn't even set really a width of 300 but it's probably doing what you want it to in this case and what's interesting is if I set a height of say 300 here even though the flex basis is auto or maybe it will make these 200 just so they're not squares the flex basis of auto here is going to use height when it's this way and it's going to use width when it's this way so you're just basically setting a width and a height and nothing too strange is happening and it's going to behave in a very consistent way that you're used to rather than potentially changing things when you change the flex direction and there's nothing wrong now maybe instead of a width of 300 or a height of 200 and things like that they're not necessarily realistic in this situation but I wanted to show that it's consistent at least between the two different flex directions and what's important here is it's fine to set a width or a height if you need one I generally don't do that but maybe I'm going to set a min height and we could do that and have a min height on our flex items so if they need to grow they're still allowed to grow in height and the other thing with that actually with the min properties is if you do have a width and even let's let's change these back to a flex basis flex basis of 300 pixels so it's going to get all funky again and I set a max width of 100 pixels and I set a max height of 100 pixels that's actually going to overwrite the flex basis because max heights will overwrite just like a max height or max width will overwrite them a width or height it will also over it clamps things it stops things from getting bigger than that so the flex basis is always sort of the ideal size it's not the finished final size because even with the grow and the shrink with flex box you know the size that you're setting something isn't really set in stone because flex box things are flexible and they're still squishy and stuff so max heights will overwrite it and min sizes will also overwrite it so if I do a min width of 500 pixels then that is the smallest it can actually get to and min always takes precedence over max which takes precedence over width height or our flex basis in this situation now there are times we can take advantage of flex basis and one of the common ways that you actually see people doing that without even realizing it is when they just set a flex of one on something to get even columns as you can see these two are turning into like even columns and I can add more in there and the reason for that is it's actually setting a flex grow on them so it's allowing them to grow but it's setting the flex when we do this it's setting the flex basis to zero and so they're actually getting as small as they possibly can and then the flex grow is coming in and allowing them to grow so this is sort of manipulating flex basis in a way that you might not have realized which is kind of interesting and works really well for doing that type of very quick column type thing when you need something simple like that and if you do want to dive deeper into the world of flexbox and really unlock it and understand everything that is going on with it and deep dive how all of these things are actually working I have a four hour long course dedicated just to flexbox content it is called flexbox simplified and it includes understanding how it works taking these things and using them in actual examples looking at common layouts that we can build and you can reuse from one project to the other and if you're interested in that it is linked just down below and with that I would like to thank my enablers of awesome Jan, Johnny, Michael, Mr. Dave, Patrick, Simon, Steven and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your coin on the internet just a little bit more awesome