How to use the flex property In CSS
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.
<!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:
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
Contact Us