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;- A number can be any length unit (px, rem, inch…), or a percentage, specifying the initial length of the flexible item(s).
- auto is the default value and when defined, the item is equal to the length (height or width) of the flexible item, and if it’s if the item has no length specified, the content will rule the length. This is probably the reason we have to face a flex-basis vs width dilemma.
- As always, the initial value is used to set a CSS property to its default value.
- If we specify inherit as a flex-basis value the item takes the computed value of its parent element flex-basis property.
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.