GuideLabGlossary

Flex items request flex base size

Flex items get to say what size they’d like to be before any growing or shrinking happens

Flexbox is all about having flex items that grow and shrink. But if they are asked to shrink, what size do they shrink down from? There has to be a size that those flex items would be if they weren’t asked to shrink, right?

1flex-shrink: 1There’s very little room available.You might have to shrink!I’m cool with that but to be honest, maybe I’m so small already I won’t need to?I’m not sure what size I’m supposed to be...

This size is called a flex base size, and is set with the flex-basis property.

flex-basis is a property that sets that requested size for each flex item.

The cool thing about it is that it always refers to the size in the main axis of the flex container.

You don’t need to figure out if you should use inline-size/block-size, or width/height. You just use this one property.

flex-basisAlways works in the main direction

If you change the from row to column, your flex items will still be requesting the same size.

main directionmain directionflex-basis: 150px11150px150px

The flex base size is used to check if a flex item will fit on a flex line in multi-line flex containers.

If the flex container doesn’t allow flex items to wrap, then all flex items end up on a single flex line regardless of this size.

12flex-basis: 150pxflex-wrap: nowrapSorry, nowrap

If wrapping is allowed, then this size is used to figure out if each flex item can fit on a flex line. If it can’t, it wraps into a new flex line.

2112flex-wrap: wrapLooks like I won’t fit...Can I wrap into a new flex line?Go ahead, wrap!flex-basis: 150px

By default, flex items request a flex base size based on the content inside those flex items.

By default, flex-basis has a value of auto. This means “check my value of the size property which corresponds to the main direction”.

flex-basis: automain directionOkay, what’s your size in the?

Because in English text in a line/row of text goes from left to right by default, the corresponding size would be set by the inline-size property.

main direction2inline-size: 150pxflex-basis: autoflex-direction: row

The default value of inline-size is auto.

inline-size: autoINITIAL PROPERTY VALUE

When both flex-basis and the main size property are auto, then this size will be derived from the contents of the flex item.

inline-size: autoflex-basis: autoGet flex base size from the flex item’s content

Sizing a flex item based on its content.

A lot of the time, for a paragraph of text this will be the max-content size.

All the text on one linemax-content

For an image, the max-content size would be the natural size of the image.

.WEBP400 X 140Natural size = max-content

You can use this property to control how many flex items there are on a flex line.

Because this size affects if a flex item fits into a flex line, you can use it to ensure there’s an exact number of flex items in a flex line

132flex-basis: 50%