Use only width for flexbox grid norms?

Question

css

What are the consequences if you use not the flex-basisgood old one for the grid width?
I got hooked on TailwindCSS and there they only come out of the box width. Of course, you can write down the classes for adjusting the width yourself, like in Bootstrap, but it became interesting, but what the hell is the difference?

Answer 1

There will be no difference until you turn the main axis. For example, when adapting to mobile sizes.
In the case of the width, the specified value will remain the width. And in the case of basis will be the height.
I usually don't change the direction of the axis, just change the width or basis. In the case of the grid, it will most likely be the same, but you need to look at how the specific one is arranged.
Those. conclusion: if there is no rotation of the main axis, then it makes no difference.
Sandbox for the horizontal main axis: https://jsfiddle.net/Ls3mdfa5/ In it, you can experiment with different shrink, grow and cell contents, while the average has a width in one case, in another basis.

Answer 2

What is the difference between flex-basis and width?

Answer 3

The difference is that it widthdetermines the strictly defined size of the element - its size along the X axis, while it flex-basisdetermines the size of the element along the main axis of the flexbox container. If flex-directionit matters rowor row-reverse- there is no difference, but if this property matters columnor column-reverse- the difference is fundamental. All this is in the documentation .