flex property is a shorthand used to set
flex-basis properties on flexible items. These properties determine the way flexible items are aligned and ordered, along with their flexibility inside their parent containers.
Review an example here:
The general syntax of the
flex property is:
flex: <flex-grow> <flex-shrink> <flex-basis>
flex-grow factor of the flex item. Its value is unitless and a
<number>. Its initial value is 0.
flex-shrink factor of the flex item. Its value is unitless and a
<number>. Its initial value is 1.
Defines the initial length of the flex item. Its value is specified as a
<'width'> — an absolute
calc() result, or the keyword
auto. Its initial value is
flex property can take one, two, or three values. Here are the rules:
- If the one value is a unitless
<number>, like so:
flex-growis assigned the value.
flex-shrinktakes its default value of 1, and
flex-basisis assumed to be 0 when omitted.
flex: 3; // explodes to: flex: 3 1 0 // or flex-grow: 3 flex-shrink: 1 flex-basis: 0
- If the one value is a
<length>, then it becomes the
flex-shrinkdefault to 1 when omitted.
flex: 3% // explodes to: flex: 1 1 3% // or flex-grow: 1 flex-shrink: 1 flex-basis: 3%
flex: 3px // explodes to: flex: 1 1 3px // or flex-grow: 1 flex-shrink: 1 flex-basis: 3px
- If the two values set in the
flexproperty are both a unitless
flex-growtakes the first value and
flex-shrinktakes the second.
flex-basisis assumed to be 0.
flex: 4 2 // explodes to: flex: 4 2 1%
- If one of the numbers is a
<percentage>and the other is a
flex-growtakes the other value.
flex-shrinkdefaults to 1.
flex: 4% 5 // explodes to: flex: 5 1 4%
flex: 6 3% // explodes to: flex: 6 1 3%
- In this case, the normal syntax is used. Note that the values in the
flexproperty may not be orderly; we may find a case where a percentage value is set first or second. Below, CSS takes the first number as
flex-grow, the second occurring number as
flex-shrink, then the percentage value as
flex: 4% 5 6 // equals: flex: 5 6 4%
flex: 5 4% 6 // equals: flex: 5 6 4%
This defines the extent to which a flexible item will grow if there is available space in the flex container. The growth is proportional to the growth of its other flexible items in the same flex container.
flex-grow: 0 flex-grow: 0 flex-grow: 0
The flex items above won’t grow to fill up the spaces because they have a growth factor of zero. If we set one of the items to a flex growth of 1:
flex-grow: 0 flex-grow: 0 flex-grow: 1
The third item will only stretch or grow to fill up the spaces to the right.
If we set the second item to a flex growth of 1 as well:
flex-grow: 0 flex-grow: 1 flex-grow: 1
The second and third items will stretch to fill up the spaces towards the right but will be distributed equally between the two. The third item won’t take up as large a space as it did before. The available space will be divided between the items 2 and 3, and then will be filled up.
If we set all items to a flex growth of 1:
flex-grow: 1 flex-grow: 1 flex-grow: 1
The available spaces will be divided among the three, and they will fill it up proportionally.
If we set the third item to the flex-grow value of 2:
flex-grow: 1 flex-grow: 1 flex-grow: 2
The third item take up twice as much space as the first and second items.
This is a simple ratio of
1:1:2. The sum of the ratios is
(1 + 1 + 2) = 4.
If the space to fill is 700px, the first item will take up
(1/4 * 700), or 175px. Likewise, the second item will take up 175px, and the third item will take up
(2/4 * 700) = 350px — twice as long as 175px.
This defines the extent to which a flex item will shrink if there is no available space in the flex container relative to its sibling flex items.
Let’s say we have a flex container of width 700px, and it has three flex items of width 300px. Judging by the figures, we are sure the flex items — specifically, the third flex item — will overflow their parent container.
flex-shrink on the third item will make it shrink to fit inside the flex container. In essence, the third item will become narrower or shorter according to the value of
If we set the following
flex-shrink values on the items:
flex-shrink: 0 flex-shrink: 0 flex-shrink: 1
The third item will shrink by a factor of 1. As we saw with
flex-grow, these values are ratios that tell us how the excess overflow will be divided among the flex items to shed:
The excess overflow is
900px - 700px = 200px. So the third item will have to shrink by 200px — from 300px to 100px — for it to fit into the flex container.
flex-shrink of the second item is set to 2:
flex-shrink: 0 flex-shrink: 2 flex-shrink: 1
Then the second item will shrink twice as much as the third item. We know that the excess overflow is 200px, so the second item will shed
(2/3 * 200) = 133.3px , so its width will be 166.6px. The third item will shed
(1/3 * 200) = 66.6px, so its width will be 233.3px.
Summing up all three items:
300 + 166.6 + 233.3 = 699.9 — approximately 700px.
This property sets the size of a flex item. It is added to the size of the flex item after growing to fill up available spaces or shrinking to avoid overflows.
The flex item size is computed and added to the size of the space it is to take, then the other items sizes are then computed.
Let’s say we have a flex container with a width of 700px. It contains three flex items, all with
flex-grow values of 1, and with the below
flex-basis: 0 flex-basis: 2% flex-basis: 3%
The percentage value tells the flex item to grow 2% or 3% of the parent’s width. With a
flex-grow of 1, all the flex items will share the available spaces equally:
(700 / 3) = 233.3px.
So the second item will grow to 231px, the third item will grow to 236px, and the first item will decrease to 225px.
Is your frontend hogging your users' CPU?As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/
LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web apps — Start monitoring for free.