What does flex: 1 mean?

css flexbox
Md. Rafee picture Md. Rafee · May 23, 2016 · Viewed 106k times · Source

As we all know, the flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties. Its default value is 0 1 auto, which means

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

but I've noticed, in many places flex: 1 is used. Is it shorthand for 1 1 auto or 1 0 auto? I can't understand what it means and I get nothing when I google.

Answer

Dhaval Chheda picture Dhaval Chheda · May 23, 2016

flex: 1 means the following:

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

Related questions

Better way to set distance between flexbox items

To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container. For me it seems like a hack, but I can't find any better way to do this. Example

Read More
Flexbox: center horizontally and vertically

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally. http://codepen.io/anon/pen/zLxBo

Read More
How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More