CSS Flex Basis
The CSS flex-basis property defines the initial size of a Flex Item along the container's main axis.
It is one of the important Flexbox properties used together with flex-grow and flex-shrink to control how Flex Items are sized and distributed.
What Is Flex Basis?
flex-basis specifies the initial main size of a Flex Item before the remaining available space is distributed.
When the Flex Direction is row, flex-basis generally controls the initial width of the item.
When the Flex Direction is column, flex-basis generally controls the initial height of the item.
Syntax
.item {
flex-basis: value;
}Common Flex Basis Values
| Value | Meaning |
|---|---|
| auto | Uses the item's main-size property such as width. |
| 100px | Sets an initial size of 100 pixels. |
| 50% | Uses 50 percent of the available main-axis size. |
| 0 | Starts the item from a zero basis before flexing. |
Flex Basis Diagram
Different flex-basis values create different initial sizes for Flex Items.
Example 1: Fixed Flex Basis
A fixed pixel value can be used to define the initial size of a Flex Item.
.item {
flex-basis: 200px;
}Output
Each item starts with a flex basis of 200px.
Example 2: Different Flex Basis Values
.small {
flex-basis: 120px;
}
.medium {
flex-basis: 220px;
}
.large {
flex-basis: 320px;
}Output
The three items have different initial main-axis sizes because their flex-basis values are different.
Example 3: Percentage Flex Basis
Flex basis can also use percentage values.
.item {
flex-basis: 50%;
}With a row-based Flex Container, a 50% flex basis gives the item a preferred starting width based on the container's main size.
Example 4: Flex Basis with Grow
Flex basis works together with flex-grow.
.item {
flex-basis: 200px;
flex-grow: 1;
}The item starts with a preferred basis of 200px.
If additional space is available, flex-grow: 1 allows the item to grow and use some of that space.
Example 5: Flex Basis with Shrink
Flex basis can also work together with flex-shrink.
.item {
flex-basis: 300px;
flex-shrink: 1;
}The item's preferred starting size is 300px.
If the container does not have enough space, flex-shrink: 1 allows the item to become smaller.
Flex Basis vs Width
| Property | Purpose |
|---|---|
| width | Sets the width of an element. |
| flex-basis | Defines the initial size of a Flex Item along its main axis. |
In a row-based Flex Container, flex-basis generally influences the initial width.
In a column-based Flex Container, flex-basis generally influences the initial height.
Flex Shorthand
The flex shorthand can combine flex-grow, flex-shrink, and flex-basis.
.item {
flex: 1 1 200px;
}This represents:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;Example 🤓🌍
Flex basis is commonly used for responsive course cards, pricing cards, dashboard panels, navigation items, and product layouts.
.course-card {
flex: 1 1 280px;
}The course card starts with a preferred size of 280px.
It can grow when extra space is available and shrink when the container becomes smaller.
Flex Grow, Flex Shrink and Flex Basis
Flex Basis
Defines the preferred initial main-axis size of the Flex Item.
Flex Grow
Controls how the item uses extra available space.
Flex Shrink
Controls how the item reduces its size when space is insufficient.
Summary
The flex-basis property defines the initial main-axis size of a Flex Item. It can use values such as pixels, percentages, or auto. It works closely with flex-grow and flex-shrink to create flexible and responsive layouts. The shorthand flex can combine all three properties.