CSS flex Property

The CSS flex property is used for controlling the size and behavior of items within a flexible container. It combines three key properties—flex-grow, flex-shrink, and flex-basis—which determine how items grow, shrink, and set their initial size relative to the available space.

This property is essential for creating responsive layouts that adapt to different screen sizes, making content more dynamic and easier to manage.

Syntax

/* flex: flex-grow flex-shrink flex-basis */
flex: 1 0 auto;

Property Values

Detailed Explanation of Flex Property Values

1. Flex-Grow

flex-grow specifies how much a flex item will grow relative to other items in the container when extra space is available. The value can be any positive number, with higher values allowing items to grow more.

Example:

.item1 {
 flex-grow: 2;
}

.item2 {
 flex-grow: 1;
}

2. Flex-Shrink

flex-shrink controls how much an item will shrink relative to other items when there is not enough space in the container. The value can be any positive number, with higher values indicating more shrinkage.

Example:

.item1 {
 flex-shrink: 3; 
}

.item2 {
 flex-shrink: 1; 
}

In this example, .item1 will shrink more than .item2 when space is limited.

3. Flex-Basis

flex-basis sets the initial size of a flex item before any space distribution occurs. It can be a length value (e.g., 100px), percentage (e.g., 50%), or keyword (auto or inherit).

Example:

.item1 {
 flex-basis: 200px;
}

.item2 {
 flex-basis: 30%; 
}

CSS Flex Property - Examples

Here are a few examples of the flex property that will help you better understand how it works.

Example 1: Single Value Representation

In this example the CSS flex property creates a flexible container with equal-width items, adjusting their sizes dynamically based on available space within a defined container.

Output:

👁 CSS Flex property example output

Example 2: Using flex-grow, flex-shrink, and flex-basis

This example describes the flex property with the help of the 3 values that represents the flex-grow, flex-shrink & flex-basis properties.

Output:

👁 Image

Supported Browsers

The flex property is widely supported across all modern browsers. Below are the details:

• Google Chrome: 29.0+
• Edge: 12.0+
• Mozilla Firefox: 28.0+
• Safari: 9.0+
• Opera: 17.0+