Kevin Powell - Community•3y ago

How to understand this content regarding the flex-bias?

Good afternoon everyone. I am confused about when to use the flex-bias and how to understand the following contents. Can anyone please give me some explanations? "Don't use both the flex-basis and the width numeric attribute value at the same time, and you won't encounter the problem of browsers. To put it more extremely, there is no reason to use the width attribute in Flex layouts unless necessary. Use flex-basis instead"

4 Replies

William_O^2OP•3y ago

And this: “We must be clear about the fact that in Flex layout, there is no direct effect of setting the width of a child item. At this point, someone will surely retort, I obviously set the width: 100px on the effect! Yes, there is an effect, but it is not the direct effect of width, but the role of flex-basis.”

Kevin Powell•3y ago

Curious where you saw that posted? It's pretty much wrong, except in specific cases. Let's say you a parent with display: flex, and some children in there. Setting either a flex-basis or a width will have the same effect. That's because flex-basis has a default value of auto, which basically means "no value set here, go look at the width instead". (it's slightly more than that, but let's keep it simple) Now, flex-basis takes precedent over width when the flex-direction is row. So, in a simple situation where you haven't changed the flex-direction, then yes, setting both is pointless, it's either one or the other. But which one you pick doesn't change very much... though, to be honest, if I am putting in a set value, I generally will pick width over flex-basis. The reason for that is because flex-basis doesn't set a width, but it sets the size of the element along the primary axis. That means that if you change the flex-direction to column, the flex-basis will now work along the vertical axis, so, in a way, it acts like the height. So, if you had the following, the items would have a width of 100px and a height of 200px.

.flex-parent {
  display: flex;
  flex-direction: column;
}

.flex-item{
  width: 100px;
  flex-basis: 200px;
}

.flex-parent {
  display: flex;
  flex-direction: column;
}

.flex-item{
  width: 100px;
  flex-basis: 200px;
}

So saying that there is no reason to set a width is pretty misleading, and can even lead to issues... because it's petty common switch flex-direction using a media query, and if you did that and had a flex-basis on the elements, it might have unintended consequences, whereas width is always width and nothing else. Might be easier to understand looking at it being used in action, so here is a very basic example: https://codepen.io/kevinpowell/pen/Jjvagro I should do a video on this 😄

William_O^2OP•3y ago

Thank you for replying.😆 Later, I found another article talking about the topic. It explains this question clearly, I think the original author wants to simplify the solution, so he asks the developer not to use flex-basis and width together but bring confusion to junior people. This is because then the following priority cover: min|max-width > flex-basis > width > flex-basis:auto Now I need to add more to my little note. I know the flex-basis will action as height when flex-column enable, but I did not realise the width will miss at this moment😅 Thank you again @Kevin

Kevin Powell•3y ago

Yeah, I tend to simplify it the other way around... Don't worry about flex basis and just use width ☺️

Gaming

Programming

How to understand this content regarding the flex-bias?