🍱 Flexbox
👴 Flex Container
🧒 Flex Child
flex
flex is a shorthand for three flex child properties - flex-grow, flex-shrink, and flex-basis.
These three properties enable us to control the size and flexibility of the items along the main axis.
The initial value of this property is:
/* flex: 0 1 auto; */
.initial {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
Syntax
The flex property may be specified using one, two, or three values.
1️⃣ One-Value Syntax
The value must be one of:
- a valid value for
flex-grow: then the shorthand expands toflex: <flex-grow> 1 0. - a valid value for
flex-basis: then the shorthand expands toflex: 1 1 <flex-basis>. - The keyword
none. This is equivalent to settingflex: 0 0 auto.
2️⃣ Two-Value Syntax
The first value must be a valid value for flex-grow.
The second value must be one of:
- a valid value for
flex-shrink: then the shorthand expands toflex: <flex-grow> <flex-shrink> 0. - a valid value for
flex-basis: then the shorthand expands toflex: <flex-grow> 1 <flex-basis>.
3️⃣ Three-Value Syntax
The values must be in the following order:
- a valid value for
flex-grow. - a valid value for
flex-shrink. - a valid value for
flex-basis.
flex-basis
The flex-basis property specifies the initial size of the flex item before any space distribution happens.
The initial value for this property is auto.
If flex-basis: auto:
- If the item has an absolute size set. For example, if you had given the item a width of 200 pixels. In this case,
200pxwould be theflex-basisfor this item. - If the item is auto-sized, then
autoresolves to the size of its content. It will take themax-contentsize of the item as theflex-basis.
check the illustration of
min-contentandmax-content.
If flex-basis: content:
- The
flex-basiswill be themax-contentsize even there is a width set on the item.
If flex-basis: 0:
- It completely ignores the size of the item when doing space distribution (space-sharing calculation). This can be useful when we want to create equally-sized columns.
- This is like setting the item
width: 0, the width of the item will then becomemin-content. - A numeric value is interpreted as pixels.
If flex-basis: 200px, a length unit:
200pxwill be the size of the item.
If flex-basis: <percentage>, a percentage:
- The
flex-basiswill be set to x% of the flex container width.
⚫️ Available Space
Flex items cannot grow if there is no positive free space, and they cannot shrink unless there is negative free space.
➕ Positive Free Space
If we took all of the items and added up their widths (or heights if working in a column), is that total less than the total width (height) of the container? If so, then we have positive free space and flex-grow comes into play.
When a flex container has positive free space, it has more space than is required to display the flex items inside the container.
Positive free space. (3 flex items each 100 pixels wide)
➖ Negative Free Space
If we took all of the items and added up their widths (or heights if working in a column), is that total more than the total width (or height) of the container? If so, then we have negative free space and flex-shrink comes into play.
Negative free space. (3 flex items each 200 pixels wide)
The total space needed for the three flex items is 600 pixels, so we have 100 pixels of negative free space. We can remove some space from the items in order to make them fit the container.
📈 flex-grow
The flex-grow property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.
If the factor is the same, and there is positive free space in the flex container then the positive free space will be distributed equally to all flex items.
Examples
flex: 1 1 auto
The flex-basis: auto and the items don't have a width set, so they are auto-sized. The flexbox will use the max-content size of the items as flex-basis.
After placing the items we have some positive free space in the flex container.
Because flex-grow: 1, the positive free space is shared out equally among each item.
💪 The bigger item ("hello") ends up bigger because it started from a bigger size (i.e., bigger max-content), even though it has the same amount of spare space assigned to it as the others.
flex: 1 1 0
flex-basis: 0 indicates that the size of the item for the purposes of space distribution calculation is 0.
And another effect is specifying width: 0 to the item, which causes the actual width of the item to be min-content size before applying flex-grow. (tip: try to change the flex-grow to 0 in the example below to see the behavior)
In the following example, the 3 flex items have the same flex-grow factor and flex-basis is 0. This means that they can get an equal amount of space distributed as the positive free space is the width of the flex container. The end result is three equal width, flexible items.
📉 flex-shrink
The flex-shrink property specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.
If flex items are too large to fit into the flex container (negative free space exists), flex-shrink will shrink the items so that they do not overflow the container.
Example
3 flex items in a flex container. Each item has given a width of 200 pixels, and the container is 500 pixels wide.
Because flex-shrink: 0, the items are not allowed to shrink and they overflow the container.
By changing the flex-shrink value to 1, each item shrink by the same amount to fit into the container. They have become smaller than their initial width resolved by flex-basis.
By default flex items don't shrink below their minimum content size. To change this, set the item's min-width or min-height.