While i set flex-direction: column and align-items:flex-start(or any value except default which is called "stretch"), Which auto assigned CSS property controls width of the flex items?
I know that flex-basis controls height when I set flex-direction:column (since the main-axis is top to bottom). But I really wonder that which property does it control "width" of that flex item in this situation?
From the specification and following the Cross Size Determination:
Determine the used cross size of each flex item. If a flex item has align-self: stretch, its computed cross size property is auto, and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line, clamped according to the item’s used min and max cross sizes. Otherwise, the used cross size is the item’s hypothetical cross size.
Wihout using stretch you will clearly fall into the hypothetical cross size
Determine the hypothetical cross size of each item by performing layout with the used main size and the available space, treating auto as fit-content.
Then we can also read:
cross size
cross size property
The width or height of a flex container or flex item, whichever is in the cross dimension, is that box’s cross size. Its cross size property is thus either its width or height property, whichever is in the cross dimension.
So you simply define the width with the width property when dealing with a column direction and if it's auto it will compute to fit-content
More detail around fit-content here: https://www.w3.org/TR/css-sizing-3/#fit-content-size
