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?
-
3A Closed Question received ~90 Up Votes.Jenson M John– Jenson M John2023-06-01 21:25:12 +00:00Commented Jun 1, 2023 at 21:25
Add a comment
|
1 Answer
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 :)
