The flex property in CSS is a shorthand property that sets the flex-grow, flex-shrink, and flex-basis properties all in one declaration. It is a powerful and commonly used property in the Flexbox layout model, allowing developers to control how a flex item grows, shrinks, and how much space it should take up in the flex container.
Syntax
flex: flex-grow flex-shrink flex-basis;
1. flex-grow: This defines the ability of a flex item to grow relative to the rest of the flex items inside the same container. It takes a unitless value that serves as a proportion. For example, if one item has a flex-grow value of 2, and another has a value of 1, the first item will take up twice as much space as the second one.
2. flex-shrink: This controls how a flex item can shrink relative to the rest of the flex items in the same container when there isn't enough space. Similar to flex-grow, it accepts a unitless value that acts as a proportion.
3. flex-basis: This sets the initial size of a flex item before the remaining space is distributed according to the flex-grow and flex-shrink values. It can be set in pixels, percentages, or other units. If set to auto, the size of the content is taken into account.
Default Values of the flex Property
The default value of the flex property is 0 1 auto, meaning:
1. flex-grow: 0: The item will not grow to fill the available space.
2. flex-shrink: 1: The item can shrink if necessary.
3. flex-basis: auto: The size of the item is based on its content.
flex-property.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
width: 80%;
margin: auto;
border: 1px solid #ccc;
}
.item1 {
flex: 1 1 0;
background-color: lightcoral;
}
.item2 {
flex: 2 1 0;
background-color: lightseagreen;
}
.item3 {
flex: 4 1 0;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Explanation
1. In the above example, all three items have the same flex-shrink value of 1, so they will shrink proportionally if necessary.
2. The flex-grow value is set to 1 for Item 1, 2 for Item 2 and and 3 for Item 3. This means that Item 2 will take up twice the available space compared to Item . If there is extra space, Item 2 will occupy a larger portion of it.
3. The flex-basis is set to 0 for all items, which means the initial size of each flex item is considered to be zero, and the space distribution will purely depend on flex-grow.
No comments:
Post a Comment