flexThe CSS flex property is a shorthand used to set flex-grow, flex-shrink, and 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:
See the Pen
css flex examples by Chidume David (@philipsz-davido)
on CodePen.
The general syntax of the flex property is:
flex: <flex-grow> <flex-shrink> <flex-basis>
<flex-grow>Defines the flex-grow factor of the flex item. Its value is unitless and a <number>. Its initial value is 0.
<flex-shrink>Defines the flex-shrink factor of the flex item. Its value is unitless and a <number>. Its initial value is 1.
<flex-basis>Defines the initial length of the flex item. Its value is specified as a <'width'> — an absolute <length>, <percentage>, or calc() result, or the keyword auto. Its initial value is auto.
The flex property can take one, two, or three values. Here are the rules:
<number>, like so:
flex: 3;
Then flex-grow is assigned the value. flex-shrink takes its default value of 1, and flex-basis is assumed to be 0 when omitted.
flex: 3; // explodes to: flex: 3 1 0 // or flex-grow: 3 flex-shrink: 1 flex-basis: 0
<percentage> or a <length>, then it becomes the flex-basis. flex-grow and flex-shrink default 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
flex property are both a unitless <number>, then flex-grow takes the first value and flex-shrink takes the second. flex-basis is assumed to be 0.
flex: 4 2 // explodes to: flex: 4 2 1%
<percentage> and the other is a <number>, flex-basis takes the <percentage> value and flex-grow takes the other value. flex-shrink defaults to 1.
flex: 4% 5 // explodes to: flex: 5 1 4%
flex: 6 3% // explodes to: flex: 6 1 3%
flex property 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-basis:
flex: 4% 5 6 // equals: flex: 5 6 4%
flex: 5 4% 6 // equals: flex: 5 6 4%
flex-growThis 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.
flex-shrinkThis 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.
Using 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 flex-shrink.
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: 0:0:1.
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.
If the 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.
Learn more →flex-basisThis 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 values:
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.
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.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. 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 and mobile apps — start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Learn how to manage environment variables in Next.js, which influence how an application behaves in different contexts and environments.
useActionState in React: A practical guide with examplesDiscover how React’s useActionState Hook makes it easier to handle user actions, especially form submissions and async state changes.
Compare two libraries that support creating 3D experiences in the browser. Learn how to get started with each, their core features, and key differences.
Image component to optimize imagesExplore automatic image optimization using Next Image, the built-in image optimization solution for Next.js.
One Reply to "CSS Reference Guide: <code>flex</code>"
the sentence:So the second item will grow to 231px, the third item will grow to 236px, and the first item will decrease to 225px. is wrong.
the right answer is: the first block is 221px,the second 235px, the third 242px.