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"

William_O^2OP•10/7/22, 3:49 AM

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•10/7/22, 2:19 PM

Curious where you saw that posted?

It's pretty much wrong, except in specific cases.

Kevin Powell•10/7/22, 2:27 PM

Let's say you a parent with , and some children in there.

Setting either a or a

width

width

will have the same effect.

That's because has a default value of

auto

auto

, which basically means "no value set here, go look at the

width

width

instead". (it's slightly more than that, but let's keep it simple)

Now, takes precedent over

width

width

when the is
row
row
. So, in a simple situation where you haven't changed the , 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

width

over .

The reason for that is because doesn't set a width, but it sets the size of the element along the primary axis.

That means that if you change the to , the will now work along the vertical axis, so, in a way, it acts like the

height

height

.

So, if you had the following, the items would have a width of and a height of .

So saying that there is no reason to set a

width

width

is pretty misleading, and can even lead to issues... because it's petty common switch using a media query, and if you did that and had a on the elements, it might have unintended consequences, whereas

width

width

is always

width

width

and nothing else.

Kevin Powell•10/7/22, 2:28 PM

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

Kevin Powell•10/7/22, 2:30 PM

I should do a video on this

William_O^2OP•10/8/22, 4:14 AM

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

William_O^2OP•10/8/22, 5:24 AM

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•10/8/22, 2:08 PM

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