How to use flex-grow Property In CSS
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.flex-container {
display: flex;
}
.flex-item {
background-color: lightblue;
padding: 10px;
margin: 5px;
border: 1px solid blue;
}
.flex-item:nth-child(3) {
flex-grow: 2;
/* Set the size of the third flex item */
}
</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 class="flex-item">Flex Item 4</div>
<div class="flex-item">Flex Item 5</div>
</div>
</body>
</html>
Output:
How to set the size of specific flex-item using CSS?
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