CSS flex-basis

The flex-basis property specifies the initial size of a flex item along the main axis before any free space is distributed according to the flex-grow and flex-shrink properties. It can be set to a specific length, percentage, or one of the predefined values like auto or content.

Here's an example to demonstrate how the flex-basis property works:

Result:

Item 1

Item 2

Item 3

In the example above, we have three flex items with different flex-basis values specified. The first item has a flex-basis of 100px, the second item has a flex-basis of 200px, and the third item has a flex-basis of 150px. The total size of the flex container is 450px (100px + 200px + 150px).

When the container has extra space available, the flex items will grow or shrink based on their flex-grow and flex-shrink values. If the container's size is less than the total size of the items, the items will shrink accordingly.

Here is the code for the example above:


<div style="display: flex;">
  <div style="flex-basis: 100px; background-color: lightblue;">Item 1</div>
  <div style="flex-basis: 200px; background-color: lightcoral;">Item 2</div>
  <div style="flex-basis: 150px; background-color: lightgreen;">Item 3</div>
</div>

Feel free to experiment with different values for the flex-basis property to see how it affects the sizing of flex items within a flex container.