273

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.

0

11 Answers 11

248

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%.
5
  • @LGSon, How is flex: 1 means 1 1 0px wrong when 1 1 0px and 1 1 0 are equivalent? Nov 5, 2017 at 18:52
  • 2
    @CookieMonster They might render the same, but are not equivalent, as when using a unitless value for flex-basis, the content is ignored and the element size is based on its flex-grow/flex-shrink.
    – Asons
    Nov 5, 2017 at 19:54
  • Doesn't it also kick off display: flex; ? Nov 6, 2018 at 23:20
  • @Dhaval Chheda What if you put flex:25%, i dont understand that.
    – user16234808
    Apr 18, 2022 at 8:50
  • @Coja check this documentation developer.mozilla.org/en-US/docs/Web/CSS/flex and here check one value documentation and you will understand Apr 19, 2022 at 7:13
144

Here is the explanation:

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex: <positive-number>
Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

Therefore flex:1 is equivalent to flex: 1 1 0

6
  • On a side-note: I think that when you're applying the same flex to all children, what matters is actually flex: 1 ? 0;, where "?" can be anything, it won't make any difference
    – flen
    Dec 25, 2017 at 12:14
  • @DreamTeK Only in non-standards-compliant browsers like Chrome.
    – TylerH
    Sep 7, 2018 at 17:23
  • 2
    @TylerH Correct and noted in my answer however what does flex:1 mean? is open to interpretation. The o.p doesn't ask for the spec, only for what is happening. Unfortunately Chrome is now the most popular browser and support is required. I'm not a fan or user of Chrome myself!
    – DreamTeK
    Sep 10, 2018 at 8:50
  • 1
    @DreamTeK When asking for the meaning/definition of something, one usually goes to the dictionary :-) In the case of CSS properties and shorthand, the spec is the dictionary. Browsers may differ, and detailing how each browser implements it is useful (when browsers differ), but it's still important to note that any browser that differs from the spec is simply wrong.
    – TylerH
    Sep 11, 2018 at 14:53
  • 1
    @TylerH Which is why in my answer, that is referred to states "It should be noted that this fails because these browsers have failed to adhere to the specification." along with a link to the spec!
    – DreamTeK
    Sep 12, 2018 at 7:27
122
+50

BE CAREFUL

In some browsers:

flex:1; does not equal flex:1 1 0;

flex:1; = flex:1 1 0n; (where n is a length unit).

  • flex-grow: A number specifying how much the item will grow relative to the rest of the flexible items.
  • flex-shrink A number specifying how much the item will shrink relative to the rest of the flexible items
  • flex-basis The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit.

The key point here is that flex-basis requires a length unit.

In Chrome for example flex:1 and flex:1 1 0 produce different results. In most circumstances it may appear that flex:1 1 0; is working but let's examine what really happens:

EXAMPLE

Flex basis is ignored and only flex-grow and flex-shrink are applied.

flex:1 1 0; = flex:1 1; = flex:1;

This may at first glance appear ok however if the applied unit of the container is nested; expect the unexpected!

Try this example in CHROME

.Wrap{
  padding:10px;
  background: #333;
}
.Flex110x, .Flex1, .Flex110, .Wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.Flex110 {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.Flex1 {
  -webkit-flex: 1;
  flex: 1;
}
.Flex110x{
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}
FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>


UPDATE 2021

The latest versions of all major browsers appear to implement flex: 1 and conform to W3C standard. This was verified on Chrome, Opera, Edge, Firefox, Safari, Chromium and a few Chromium variants like Brave on macOS, Windows, Linux, iOS, and Android. When attempting to test in Internet Explorer the Edge browser was force-loaded on Windows 10.

If you expect users to still implement older versions of browser then adding units is a safer bet.

5
  • 1
    When the value is 0 the unit isn't mandatory. The specification says flex: 1 is the same that flex: 1 1 0. In your example if you remove the .Wrap class in the .Flex110x,.Flex1, .Flex110, .Wrap rule works as expected.
    – user4994625
    Mar 9, 2017 at 9:40
  • Provide a link please, I can't found in the specification what you're saying. I have not invented anything, my answer is based on the flexbox specification
    – user4994625
    Mar 9, 2017 at 13:43
  • @Obsidian Here is the link: w3.org/TR/css-flexbox-1 If you go to the portion for 'shorthand' you will find: "flex: [positive-number] Equivalent to flex: [positive-number] 1 0 ...
    – MikeB
    Apr 7, 2017 at 18:08
  • what should one use then?
    – Toskan
    Aug 6, 2018 at 14:29
  • 2
    @Toskan For maximum compatibility use the full syntax flex:1 1 0n;
    – DreamTeK
    Aug 6, 2018 at 15:22
21

I was also confused with flex: 1, so I will share here my way of understanding this property :)

To understand the concept of flex: 1, first we have to make sure the parent element has a display property set to flex i.e., display: flex. Now, the nested flexed elements inside the parent can make use of flex: 1.

Ok now the question is what will this do to the flexed element? If an element has flex: 1, this means the size of all of the other elements will have the same width as their content, but the element with flex: 1 will have the remaining full space given to it. See the illustration below.

enter image description here

1
  • 9
    The answer is a bit incomplete as it doesn't state that flex: 1; is the shorthand for flex: 1 1 0;, which on its own is the shorthand for: flex-shrink: 1; flex-grow: 1; flex-basis: 0;
    – ifthenelse
    Jan 13, 2022 at 9:32
19

In Chrome Ver 84, flex: 1 is equivalent to flex: 1 1 0%. The followings are a bunch of screenshots.

enter image description here

0
16

The default values are set to 1 1 0% (which are the shorthand values for flex-grow flex-shrink flex-basis respectively) probably because these are the values that make the most sense for "flex" items. Here are what exactly those values mean:

  • flex-basis: It specifies the ideal size for the items. Ideal means "assuming there is neither any extra space, nor any shortages of the space". 0% means we have no ideal size for them, we want them to be sized truely flexibly. We want them to be sized automatically(thus the word "flexible") based on the available space.
  • flex-grow: After taking the flex-basis into consideration, if there's remaining extra space, it specifies how "that extra space"(notice we're not talking about the whole space) must be divided between the items. The ones with higher flex-grow will eat up more of the extra space. It makes sense to use an equal flex-grow on all items by default so that all items will have the same share of the extra space. When flex-basis is 0%, a flex-grow of 1 on all items makes them divide "the whole space of the container"(since flex-basis used no space, the extra space equals the whole space of the container).
  • flex-shrink: After taking the flex-basis into consideration, if the available space is not enough, it specifies how "the shortage of space"(and again, not the whole space) must be divided(imposed on) among the items. The ones with higher flex-shrink will have to "endure" more of that shortage.

Examples:

  • flex-basis A flex-basis of 400px on 3 items, means that we'd rather have 3 items of 400px wide each. Now, what will happen:
    1. If we have extra space? Let's say the container width is 1500 pixels wide. The 3 items will take up 1200 pixels, what should happen to that extra 300 pixels?
    2. If we have shortage of space in the container? E.g., If there are 5 items of 400 pixels each in a 1500px container (shortage = |1500px - 5 * 400px| = 500px).
  • The answer to the two questions above are flex-grow(answer to the 1st question) and flex-shrink(answer to the 2nd question).

E.g., what if one of the three items had a flex-grow of 5 and the other ones were still on their default values(i.e., 1)? Then the one with the flex-grow of 5 would get (300px / (1+1+5)) * 3 of the extra space.

Another useful example is, if you have a flex container and you want each of the children to take exactly the full width of the parent(e.g., an image carousel), in that case you may use a flex: 0 0 100% on all children so that items will have a flex-basis of taking the full-width of the parent, and turning their growing/shrinking off.

1
  • Best explantion of Flex Basis, Grow & Shrink so far Jan 17 at 6:15
3

flex: 1 sets flex-grow to 1 (whereas the default value is 0).

What this does:

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

(Source: CSS Tricks)

In the case of a one-value flex syntax with a unitless number (rather than a value for flex-basis, the other option),

...it is interpreted as flex: <number> 1 0; the flex-shrink value is assumed to be 1 and the flex-basis value is assumed to be 0.

(Source: MDN)

2

If you use flex:1 inside flex container then all flex items will occupy same space.

If you use flex:1 inside specific flex item then that flex item will occupy remaining space.

0

If you use flex :1 to each element which are items of flex parent then all items will have same width.

0

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis.

But if the flex property has only a single value, then it only sets the "flex-grow" and other properties are omitted so they get a default value. (Not initial value)


For flex: 1;

flex-grow -> User defined = 1 (above value)

flex-shrink -> Defaults to 1 when omitted. (initial is 0)

flex-basis -> Defaults to 0 when omitted. (initial is auto)

-1

Flex: 1 is equivalent to Flex: 1 0 0 and Flex: 1 1 0

Please see the images I took showing the output, respectively, for Flex: 1 and Flex: 1 0 0 and Flex: 1 1 0 below

Flex: 1Image1
Flex: 1 0 0enter image description here Flex: 1 1 0enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.