CSS flex property

The flex property in CSS is shorthand for flex-grow, flex-shrink, and flex-basis. It only works on the flex-items, so if the container's item is not a flex-item, the flex property will not affect the corresponding item.

This property is used to set the length of flexible items. The positioning of child elements and the main container is easy with this CSS property. It is used to set how a flex-item will shrink or grow to fit in the space.

The flex property can be specified by one, two, or three values.

When there is the one-value syntax, the value must either be a number or the keywords such as none, auto, or initial.
When there is the two-value syntax, the first value must be a number (used as flex-grow), the second value can either be a number (used for flex-shrink) or a valid width value (used as flex-basis).
When there is three-value syntax, then the values must follow the order: a number for the flex-grow, a number for the flex-shrink, and a valid width value for flex-basis.

Syntax

Property Values

flex-grow: It is a positive unitless number that determines the flex-grow factor. It specifies how much the item will grow compared to the other flexible-items. Negative values are not allowed. If it is omitted, then it sets to the value 1.

flex-shrink: It is the positive unitless number that determines the flex shrink factor. It specifies how much the item will shrink compared to the other flexible-items. Negative values are not allowed. If it is omitted, then it sets to the value 1.

flex-basis: It is the length in relative or absolute units that defines the initial length of the flex-item. It is used to set the length of the flex-item. Its values can be auto, inherit, or a number followed by the length units such as em, px, etc. Negative values are not allowed. If it is omitted, then it sets to the value 0.

auto: This value of the flex property is equivalent to 1 1 auto.

none: This value of the flex property is equivalent to 0 0 auto. It neither grows nor shrinks the flex-items.

initial: It sets the property to its default value. It is equivalent to 0 0 auto.

inherit: It inherits the property from its parent element.

Example

In this example, there are three containers, each having three flex-items. The width and height of the containers are 300px and 100px.

We are applying the flex: 1; to the flex-items of the first container, flex: 0 50px; to the flex-items of the second container, and flex: 2 2; to the flex-items of the third container.

<!DOCTYPE html>
<html>
<head>
<title>
CSS flex Property
</title>

<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
margin: 15px;
background-color: blue;
}

.flex-item{
flex: 1; // unitless number: flex-grow
}
.flex-item1{
flex: 0 50px; // flex-grow, flex-basis
}
.flex-item2{
flex: 2 2; // flex-grow, flex-shrink
}
.flex-item, .flex-item1, .flex-item2 {
background-color: lightblue;
margin: 4px;
}
</style>
</head>

<body>
<h1> CSS flex Property </h1>
<h3> flex: 1; </h3>
<div class = "container">
<div class = "flex-item">
</div>
<div class = "flex-item">
</div>
<div class = "flex-item">
</div>
</div>
<h3> flex: 0 50px; </h3>
<div class = "container">
<div class = "flex-item1">
</div>
<div class = "flex-item1">
</div>
<div class = "flex-item1">
</div>
</div>
<h3> flex: 2 2; </h3>
<div class = "container">
<div class = "flex-item2">
</div>
<div class = "flex-item2">
</div>
<div class = "flex-item2">
</div>
</div>
</body>
</html>

Test it Now

Output

Example

In this example, there are two containers, each having three flex-items. The width and height of the containers are 200px and 100px.

We are applying the flex: auto; to the flex-items of the first container, flex: 0 1 30px; to the flex-items of the second container.

<!DOCTYPE html>
<html>
<head>
<title>
CSS flex Property
</title>

<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
margin: 15px;
background-color: blue;
}

.flex-item{
flex: auto;
}
.flex-item1{
flex: 0 1 30px;
}

.flex-item, .flex-item1{
background-color: lightblue;
margin: 4px;
}
</style>
</head>

<body>
<h1> CSS flex Property </h1>
<h3> flex: auto; </h3>
<div class = "container">
<div class = "flex-item">
</div>
<div class = "flex-item">
</div>
<div class = "flex-item">
</div>
</div>
<h3> flex: 0 1 30px; </h3>
<div class = "container">
<div class = "flex-item1">
</div>
<div class = "flex-item1">
</div>
<div class = "flex-item1">
</div>
</div>

</body>
</html>

Test it Now

Output