Specifing width of a flexbox flex item: width or basis?

CssFlexbox

Css Problem Overview


Say I'm doing 3 flex columns, first one 50%, the other two auto adjust.

.half {
    flex: 0 0 auto ;
    width: 50% ;
}

or

.half {
    flex: 0 0 50%;
}

These seem to be functionally the same. Are they?

Css Solutions


Solution 1 - Css

The bottom statement is equivalent to:

.half {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 50%;
}

Which, in this case, would be equivalent as the box is not allowed to flex and therefore retains the initial width set by flex-basis.

Flex-basis defines the default size of an element before the remaining space is distributed so if the element were allowed to flex (grow/shrink) it may not be 50% of the width of the page.

I've found that I regularly return to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for help regarding flexbox :)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDoug CassidyView Question on Stackoverflow
Solution 1 - CssCharlie FraterView Answer on Stackoverflow