Dissecting flexbox

| permalink | css

{unfinished / in progress}

Flexbox is relatively easy to use, but it has many quirks that produces unexpected behaviours if they are not explained.

Size control in Flexbox

A problem with Flexbox is that flex-grow and flex-shrink can only take care of the "available space" (content size), the available space does not include padding and border.

Youtube video: https://youtu.be/fm3dSg4cxRI?t=976

Therefore you need a wrapper element around the item with the padding/border in order to avoid this issue.

Flex-shrink

If flex-wrap:wrap, flex item will only shrink when exceeding 100% width.

Because wrapping occurs before flex row and shrink operation, it is not possible to have negative space unless a single item exceed full width.

Flex-basis

Size of flex items are calculated in two stages.

First, flex-basis of all flex items are added up and compared to the total space available from the flex container.

Next, the left over or overflow space is taken or given up by each flex item determined by flex-grow and flex-shrink respectively.

If 0 < flex-grow < 1, the flex item will only be allowed to grow up a maximum of {flex-grow}/1 * 100% of the available space.
If 0 < flex-shrink < 1, the flex item will only be allowed to give up a maximum of {flex-shrink}/1 * 100% of the requested space

The starting size of flex item, before flex-grow and flex-shrink is taken into account.

Flex-basis is the width or height based on flex-direction.

When width (when flex-direction: row) or height (when flex-direction: column) is set to auto, takes over the role of width and height depending on flex-direction.

width and height takes priority if the value is not auto.

Either flex-basis, or the width or height acting as flex-basis, becomes the "requested size" (a term I invented for ease of understanding).

The total requested size is the sum of requested size from all flex items participating in the division of space.

The total width or height of the flex container, is the "available size".

If available size is larger than the total requested size, how the remaining space is divided up is determined by flex-grow.

If the available size is smaller than the total requested size, how the extra space is given up by the flex items is determined by flex-shrink.

Flex-grow

Decides how items take over the available space.

Available space = total space in flex container - sum of flex-basis from all items

Initial value is 0.

Negative value is out of range and clamps back to 0.

Positive value denotes the portion of space it takes up after all flex-basis is accounted for.

Positive value less than 1, will only be allowed to grow to a maximum of {flex-grow}/1 * 100%,