How to set the size of specific flex-item using CSS?

Last Updated : 20 May, 2024

To set the size of a specific flex item using CSS, you can use the flex property. This property allows you to specify the initial size, grow factor, and shrink factor of the item, controlling its behavior within the flex container.

Flex follows pre-defined properties to change the size of the flex items.

Property	Description
Order	Specifies the order of a flex item in the sequence.
flex-grow	Determines how much a flex item can grow.
flex-shrink	Controls the ability of a flex item to shrink.
flex-basis	Sets the initial main size of a flex item.
flex	Shorthand for flex-grow, flex-shrink, and flex-basis.
align-self	Overrides the align-items value for a specific flex item.

Table of Content

Using the flex property:
Using flex-grow Property

Using the flex property:

Using the flex property provides a concise way to control the size of flex items. It combines flex-grow, flex-shrink, and flex-basis properties, allowing you to define how items grow, shrink, and initially size themselves within a flex container using a single declaration.

Syntax:

flex: 1 0 auto;

Example: In this example a flex container and three flex items. Each item has equal size due to flex: 1 1 auto;, distributing space evenly. Adjust properties for different item sizes.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Item Size Example</title>
    <style>
        .flex-container {
            display: flex;
        }

        .flex-item {
            flex: 1 1 auto;
            /* Sets flex-grow, flex-shrink, and flex-basis */
            background-color: lightblue;
            padding: 10px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">Flex Item 1</div>
        <div class="flex-item">Flex Item 2</div>
        <div class="flex-item">Flex Item 3</div>
    </div>
</body>

</html>

Output:

setting-the-size-of-specific-flex-item-using-CSS

Using flex-grow Property

To set the size of a specific flex item using flex-grow, assign a value to flex-grow property for that item. Higher values make it grow more compared to other items. For instance, .flex-item { flex-grow: 2; } makes it grow twice as much.

Syntax:

flex-grow: number| initial| inherit;

Example: In this example, the flex container contains five items. Targeting the third item using nth-child(3), we set its flex-grow property to 2, making it expand twice as much when extra space is available. Adjust nth-child for others.