The flex attribute in CSS serves as a condensed version of flex-grow, flex-shrink, and flex-basis. It exclusively applies to flex-items, meaning that if the element within the container is not a flex-item, the flex attribute will have no impact on that specific item.
This attribute is employed to define the size of adaptable elements. Managing the arrangement of descendant elements and the primary container becomes effortless with this CSS feature. It determines how a flex-item will contract or expand to occupy the available 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
flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;
Property Values
The flex-grow property is a non-negative unitless number that defines the flex-grow ratio. This property indicates the extent to which an item can expand relative to other flexible items. It does not accept negative values. When omitted, it defaults to a value of 1.
The flex-shrink property represents a unitless positive number defining the flex shrink factor, indicating the extent to which an item can shrink relative to other flexible items. Negative values are prohibited, and if omitted, the default value is set to 1.
The flex-basis property specifies the initial size of a flex item using relative or absolute units. It determines the starting size of the flex item and can be assigned values like auto, inherit, or a numerical value with units like em, px, etc. Negative values are not permitted, and if omitted, the default value is set to 0.
This setting of the flex property is the same as 1 1 auto.
This setting of the flex property is identical to 0 0 auto. It does not allow the flex items to expand or contract.
It assigns the attribute to its standard setting. This is identical to 0 0 auto.
inherit: The element acquires the property from its parent component.
Example
In this instance, there are three divs, each containing three flex items. The dimensions of the divs are set to 300px in width and 100px in height.
We are assigning the flex value of 1 to the flex items within the initial container, setting the flex value to 0 50px for the flex items in the second container, and specifying a flex value of 2 2 for the flex items within 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>
Output
Example
In this instance, there are a pair of containers, with three flex-items contained within each. The dimensions of the containers are set to 200px in width and 100px in height.
We are assigning the flex: auto; property to the flex items within the initial container, and flex: 0 1 30px; property to the flex items within the subsequent 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>
Output