In addition to the properties that set the alignment of elements relative to the borders of the flex container, there are three more properties that allow you to control the elements:
- flex-basis : defines the initial size of the flex item
- flex-shrink : determines how the flex item will shrink relative to other flex items in the flex container
- flex-grow : determines how a flex item will grow relative to other flex items in a flex container
Flex basis
A flex container can grow or shrink along its central axis, for example, when the browser resizes, if the container has a non-fixed size. And along with the container, its flex items can also grow and shrink. The flex-basis property defines the initial size of a flex item before it starts resizing to fit the size of the flex container.
This property can take the following values:
- auto : the initial size of the flex item is set automatically
- content : the size of the flex element is determined by its content, at the same time, this value is not supported by all modern browsers, so it should be avoided for now
- numeric value : we can set a specific numeric value for element dimensions
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox In CSS3</title>
<style>
.flex-container {
display: flex;
border: 1px #ccc solid;
}
.flex-item {
text-align: center;
font-size: 1em;
padding: 1.2em;
color: white;
}
.item1 {
background-color: #675BA7;
flex-basis: auto;
width: 150px;
}
.item2 {
background-color: #9BC850;
flex-basis: auto;
width: auto;
}
.item3 {
background-color: #A62E5C;
flex-basis: 200px;
width: 150px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">Flex Item 1</div>
<div class="flex-item item2">Flex Item 2</div>
<div class="flex-item item3">Flex Item 3</div>
</div>
</html>
The first element has its property flex-basis set to auto. Therefore, the first element will use the value of the property as the real value for the width width.
The second element has its property flex-basis set to auto, but the property width is also set to auto. Therefore, the actual width of the element will be set according to its content.
The property of the third element flex-basis has a specific value, which is used. And the property width in this case no longer plays any role.
Flex-shrink
If the flex container does not have enough space to place an element, then we can determine the further behavior of this element using the flex-shrink property . It specifies how the element will be truncated relative to other elements.
The property takes a number as its value. Its default value is 1.
Consider the effect of this property on an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox In CSS3</title>
<style>
.flex-container {
display: flex;
border: 1px #ccc solid;
width: 400px;
}
.flex-item {
text-align: center;
font-size: 1em;
padding: 1.2em;
color: white;
}
.item1 {
background-color: #675BA7;
flex-basis: 200px;
flex-shrink: 1;
}
.item2 {
background-color: #9BC850;
flex-basis: 200px;
flex-shrink: 2;
}
.item3 {
background-color: #A62E5C;
flex-basis: 200px;
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">Flex Item 1</div>
<div class="flex-item item2">Flex Item 2</div>
<div class="flex-item item3">Flex Item 3</div>
</div>
</html>
In this case, the initial width of each element is 200px, so the total width is 600px. However, the width of the flex container is only 400px. That is, the size of the container is not large enough to contain the elements in it, so the property flex-shrink, which is defined for the elements, comes into effect.
To truncate elements, the browser calculates a truncation factor (shrinkage factor). It is calculated by multiplying the property value flex-basis by flex-shrink. Thus, for three elements, we get the following calculations:
200px * 1 = 200 200px * 2 = 400 200px * 3 = 600
Thus, we get that for the second element the truncation factor is twice as large as the factor for the first element. And for the third element, the coefficient is three times greater than that of the first element. Therefore, in the end, the first element, when truncated, will be three times as large as the third and twice as large as the second.
Flex-grow
The flex-grow property controls the expansion of items if there is extra space in the flex container. This property is in many ways similar to the property flex-shrink, except that it works towards increasing the elements.
As a value, the flex-grow property takes a positive number that indicates how many times the element will grow relative to other elements when the size of the flex container increases. By default, the flex-grow property is 0.
So, we use the flex-grow property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox In CSS3</title>
<style>
.flex-container {
display: flex;
border: 1px #ccc solid;
}
.flex-item {
text-align: center;
font-size: 1em;
padding: 1.3em;
color: white;
}
.item1 {
background-color: #675BA7;
flex-grow: 0;
}
.item2 {
background-color: #9BC850;
flex-grow: 1;
}
.item3 {
background-color: #A62E5C;
flex-grow: 2;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">Flex Item 1</div>
<div class="flex-item item2">Flex Item 2</div>
<div class="flex-item item3">Flex Item 3</div>
</div>
</html>
So, for each element there are basic initial sizes. Here, the sizes for the elements are not explicitly specified, so the size of each element in this case will be the sum of the sizes of the internal content, to which the padding is added.
As the container expands, the items will grow according to the flex-grow property that is specified for each item. The space that the container stretches to is considered extra space.
Since the first element has a flex-grow property of 0, the first element will have a constant constant size. The second element has a flex-grow of 1 and the third element has a flex-grow of 2. So they add up to 0 + 1 + 2 = 3. So the second element will grow by 1/3 of the extra space that the container stretches, and the third element will get 2/3 extra space.
flex property
The flex property is a union of flex-basis, flex-shrink and , flex-grow and has the following formal syntax:
flex: [flex-grow] [flex-shrink] [flex-basis]
By default, the property flexis set to 0 1 auto.
In addition to specific values for each of the sub properties, we can set the flex property to one of three general values:
- flex: none: equivalent to 0 0 auto, so that the flex item doesn’t expand or truncate as the container grows and shrinks
- flex: auto: equivalent to value1 1 auto
- flex: initial: equivalent to value0 1 auto
So, let’s apply the flex property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox In CSS3</title>
<style>
.flex-container {
display: flex;
border: 1px #ccc solid;
width: 600px;
}
.flex-item {
text-align: center;
font-size: 16px;
padding: 10px 0;
color: white;
}
.item1 {
background-color: #675BA7;
width: 150px;
flex: 0 0 auto
}
.item2 {
background-color: #9BC850;
width: 150px;
flex: 1 0 auto;
}
.item3 {
background-color: #A62E5C;
width: 150px;
flex: 0 1 auto;
}
.item4 {
background-color: #2A9FBC;
width: 150px;
flex: 1 1 auto;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">Flex Item 1</div>
<div class="flex-item item2">Flex Item 2</div>
<div class="flex-item item3">Flex Item 3</div>
<div class="flex-item item4">Flex Item 4</div>
</div>
</html>
Here, each element has an initial width of 150 pixels, because all elements flex-basishave a property value of 0, which in total for all elements will be 600 pixels.
When shrinking the container, the 3rd and 4th elements will decrease, since their property flex-shrinkis greater than zero. And since both elements have this property equal to 1, both elements will decrease in equal proportions.
When the container is stretched, the 2nd and 4th elements will increase, since these elements have a property flex-growgreater than zero. And also, since this property is equal to 1, these elements will increase in equal shares.