What property controls width when flex-direction is set to "column"?

0

Issue

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?

Solution

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

Answered By – Temani Afif

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More