CSS flex property
The flex property in CSS is a shorthand for setting the flex-grow, flex-shrink, and flex-basis properties in one line. It is used in the Flexbox layout model to control the flexibility of flex items within a flex container. This property simplifies the process of specifying how items should grow, shrink, and their initial size.
Basic Syntax
selector {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 500px; /* Fixed width for demonstration */
height: 100px;
background-color: lightgray;
}
.item {
height: 100%;
margin: 5px;
background-color: lightcoral;
border: 1px solid red;
}
.item-1 {
flex: 1 1 150px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 150px */
}
.item-2 {
flex: 2 1 200px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 200px */
}
.item-3 {
flex: 1 0 100px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 100px */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
</div>
</body>
</html>
In this example, each item’s flex property sets the flex-grow, flex-shrink, and flex-basis values respectively.
Values for flex
1. flex: none
- Description: This is the default value. It is equivalent to
flex: 0 0 auto, which means the item will not grow or shrink and will use its width or height as defined by its content and any explicitwidthorheightproperties. - Use Case: Use this value when you do not want the flex item to be flexible and prefer it to have a fixed size based on its content.
.item {
flex: none; /* Equivalent to flex: 0 0 auto */
}
2. flex: auto
- Description: This is equivalent to
flex: 1 1 auto, meaning the item will grow and shrink as necessary to fit the container, and its base size is determined by its content and width/height properties. - Use Case: Use this value when you want the item to be flexible, growing and shrinking based on available space, with its initial size based on its content.
.item {
flex: auto; /* Equivalent to flex: 1 1 auto */
}
3. flex: [flex-grow] [flex-shrink] [flex-basis]
- Description: This is a more detailed specification where you set each property individually:
flex-grow: Defines the proportion of available space that the item should take up.flex-shrink: Defines how the item should shrink when there is not enough space.flex-basis: Defines the initial size of the item before any space distribution.
- Use Case: Use this value when you want precise control over how the item grows, shrinks, and its base size.
.item {
flex: 2 1 150px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 150px */
}
Practical Examples
Example 1: Equal Growth
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 600px; /* Fixed width for demonstration */
height: 100px;
background-color: lightgray;
}
.item {
height: 100%;
margin: 5px;
background-color: lightcoral;
border: 1px solid red;
}
.item-1 {
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
}
.item-2 {
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
</div>
</body>
</html>
In this example, both items will grow equally to fill the available space because flex-grow is set to 1 for both, and flex-shrink and flex-basis are not explicitly set (default values are used).
Example 2: Specific Growth and Shrinking
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 500px; /* Fixed width for demonstration */
height: 100px;
background-color: lightgray;
}
.item {
height: 100%;
margin: 5px;
background-color: lightcoral;
border: 1px solid red;
}
.item-1 {
flex: 2 1 100px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 100px */
}
.item-2 {
flex: 1 0 150px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 150px */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
</div>
</body>
</html>
Here, Item 1 will grow twice as much as Item 2 and will shrink if needed. Item 2 will not shrink and will start with a base size of 150px.