Deep Tech Point
first stop in your tech adventure

Flex-basis or width: What are the differences and similarities and when to use each?

July 30, 2021 | CSS

This is one of the most common questions people ask when learning CSS and flexbox module – should I use flex-basis or width? Even more, why is there flex-basis property when we have width? At the end of the day: what is the difference? This article will try to convince you that flex-basis is a property with its own potential and we cannot simply replace it with a width or height.

Flex-basis description

The flex-basis property specifies the initial length of flexible item(s). Obviously if the elements are not a flexible item, the flex-basis property has no effect. The syntax of flex-basis is:

flex-basis: number|auto|initial|inherit;

Controlling the size – width or height – of flexbox items

When it comes to size with flexbox, flex items inside a flex container behave, well flexibly. Even if we explicitly define the width and height of items, their size will be based on the size of the flexbox container they belong to. Why? This is how flex items behave – they take advantage of the available space inside flex container, and controlling the size of flex items mainly rests on the flex property that is added to each individual flex item. Flex containers are the ones that can use width and height.

So, what is the difference between flex-basis and width?

Take flex-direction into account

The first thing that you should consider is that flex-basis doesn’t always apply to width, and that is closely connected to flex-direction. When flex-direction specifies row, property controls width, but when flex-direction defines column, the property is about height.

flex-basis applies only to flex items

flex-basis is the property of flex items, not flex containers. So, flex containers will ignore flex-basis but will use width and height.

flex-basis applies only to the main axis

If we define flex-direction: column; , the width property is needed for sizing flex items horizontally.

flex-basis does not influence absolutely-positioned flex items

When flex items are positioned absolutely, they do not participate in flex layout. In this case, we need to define width and height properties.

Browser rendering when flex-basis: auto

There is no difference between flex-basis and width regarding browser rendering. However, if flex-basis is auto, it is resolved the same way as width in horizontal writing modes – the auto keyword retrieves the value of the main size property as the used flex-basis – it first checks for a width or height property (based on direction) if none, it uses the elements content sizing.
If flex-basis is defined as anything other than flex-basis: auto (which is the default), it will override any other width or height property.

Flex-basis obeys min-width and max-width settings

This fact is based on the flex-direction – if row is defined, the property will follow min-width and max-width settings, but if defined column, it will follow min-height and max-height settings.

In a column flex-basis overrides height

This can be confusing and can cause unexpected results in your design – width will obey flex-shrink, but this is not true for height – in a column flex-basis overrides height.

What is the best practice in terms of using flex-basis over width or height?

If you want consistent results – results that you expect, we recommend using flex-basis over width or height. As already said width property will obey flex-shrink, but the height property will not. And this is the main reason the differences can be striking, especially when you combine other flexbox properties.
In addition, if you want to stick to consistency and readability, use the shorthand flex.