What Is Flex in CSS?

Last Updated : 19 Sep, 2024

The flex property in CSS is the shorthand for the flexible box layout model (flexbox). This model is designed to lay items in the container by distributing the space between them and aligning the items within the flexible container. It can enable the responsive design and simplify the creation of complex layouts.

Prerequisites

What is the Flex Property?

The flex property in CSS defines how the flex item grows or shrinks to fit the available space in the container. It can allow you to adjust the size of the items relative to each other, making it easier to create layouts that respond to the different screen sizes and orientations.

The flex property is shorthand for the following three sub-properties:

flex-grow: It can specify how much the flex item should grow relative to the others.
Flex shrink: It can specify how much the flex item should shrink relative to the other when there's not enough space.
flex-basis: It can define the initial size of the flex item before any growing or shrinking occurs.

Flex Property

1. flex-grow

The flex-grow property can specify how much the flex item should grow relative to the other flex items inside the same container. If there is extra space in the container then the browser will distribute this space according to the flex-grow values.

Default value: 0 ( the flex item will not grow).
Possible Values: Any positive number.

The higher the value of the flex-grow, the more that particular item will grow compared to the others. If all the items have the flex-grow value of 1, they will grow at the same rate. If one item has the flex-grow value of 2 then it will grow twice as much as the others.

Syntax

.item1 {
    flex-grow: 1; /* Will grow equally */
  }
  .item2 {
    flex-grow: 2; /* Will grow twice as much as item1 */
  }

2. flex-shrink

The flex-shrink property can specify how much the flex item should shrink relative to the other items if the container is too small. In scenarios where the container size can be reduced, the browser will shrink the flex items according to the flex-shrink values.

Default Value: 1 ( the flex item will shrink if necessary).
Possible Values: Any positive number or 0.

If the item has a flex-shrink value of 0, it will not shrink when the container is too small, while items with a higher value will shrink more rapidly. Items with larger flex-shrink values will give up space more readily when space can be reduced.

Syntax

.item1 {
    flex-shrink: 1; /* Will shrink equally */
  }
  .item2 {
    flex-shrink: 2; /* Will shrink twice as much as item1 */
  }

3. flex-basis

The flex-basis property can define the initial size of the flex item before any space distribution happens. This property can act as the starting point for the item's size.

Default Value: auto ( the size of the item is based on its content or width/height if explicitly set).

Possible Values:

The length value (example: 100px, 20%),
auto ( the default)
or 0 (the item will take up as little space as possible initially).

The flex-basis values set the preferred size for the flex item, which can serve as the base size. The browser will then determine how much extra space the item should take or give up depending on the container's size and the values of the flex-grow and flex-shrink.

Example

.item1 {
    flex-basis: 100px;
    /* Initial size of item1 will be 100px */
}

.item2 {
    flex-basis: 200px;
    /* Initial size of item2 will be 200px */
}

Example of Flexbox in Action

This example can demonstrate how the flex property affects the layout of the flex items in the flex container.

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Property Example</title>
    <style>
        .container {
            display: flex;
            width: 100%;
            height: 200px;
            border: 2px solid black;
            justify-content: space-between;
        }

        .item {
            padding: 20px;
            text-align: center;
            background-color: lightblue;
            border: 1px solid blue;
            margin: 5px;
        }

        /* Each item uses different flex properties */
        .item1 {
            flex: 1 1 100px;
            /* Grow and shrink equally with a base size of 100px */
        }

        .item2 {
            flex: 2 1 200px;
            /* Grow twice as much as item1 */
        }

        .item3 {
            flex: 1 2 150px;
            /* Shrink twice as much as the other items */
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item item3">Item 3</div>
    </div>

</body>

</html>

Output