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.
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%.
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
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.
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.
In Chrome Ver 84, flex: 1 is equivalent to flex: 1 1 0%. The followings are a bunch of screenshots.
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:
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?
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.
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)
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: 1
Flex: 1 0 0
Flex: 1 1 0
Related
What's the difference between those to flex-items properties and which one I should use in order to build a grid system ?
For example bootstrap system and ant-design uses flex: 0 0 33 and max-width: 33% (as an example). Why the dont use flex: 0 1 33 for example.
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 0 0 33%;
The flex-grow CSS property sets the flex grow factor of a flex item's main size.
The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
To answer you question, the reason they use that property is to maintain consistence of rows and columns, it means they will have a max with of 33% and will neither shrink nor grow as opposed to yours where you have a flex-shrink of 1.
This will cause the item to collapse incase the contents are bigger than the parent element.
The following third flex item has a flex-grow of non-zero value, which is 0.1. It might be reasonable and I also read a suggestion that it should take up 100% of any extra space, because the other flex items are 0, and cannot grow. This one is 0.1 and even 0.1 / 0.1 is 100% (as a ratio). However, in practice on Chrome and Firefox it only took 10% of the extra space. Why and how should it behave?
#container {
display: flex;
border: 1px dashed blue
}
#container div {
border: 1px dashed orange
}
#container div:last-child {
flex-grow: 0.1;
background: #ccc
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
However, in practice on Chrome and Firefox it only took 10% of the extra space.
This is correct behaviour.
Find the ratio of the item’s flex grow factor to the sum of the flex grow factors of all unfrozen items on the line. Set the item’s target main size to its flex base size plus a fraction of the remaining free space proportional to the ratio. flexbox-ref
From the above, the flex-grow value effectively indicates the percentage of the free space, and flex-grow: 1 represents 100% of the free space. Also, the size after flex-grow is added is derived by such an equation.
flex item's base size + (remaining free space * (flex item's flex factors / unfrozen flex item's flex factors))
If you specify 0.1 for flex-grow in the context of the question, remaining free space will be 0.1 times the initial free space:
If the sum of the unfrozen flex items’ flex factors is less than one, multiply the initial free space by this sum. If the magnitude of this value is less than the magnitude of the remaining free space, use this as the remaining free space. flexbox-ref
So, using the above formula, the size of the third flex item can be derived as follows:
flex item's base size + (initial free space * 0.1 * (0.1 / 0.1))
= flex item's base size + (initial free space * 0.1)
So the result of flex-grow: 0.1 is 10% of the initial remaining free space.
From the specification you can read:
Flex values between 0 and 1 have a somewhat special behavior: when the sum of the flex values on the line is less than 1, they will take up less than 100% of the free space.
You can continue to read the detail of this section and you will understand why your 0.1 is actually 10% of the free space.
The important part:
This pattern is required for continuous behavior as flex-grow approaches zero (which means the item wants none of the free space). Without this, a flex-grow: 1 item would take all of the free space; but so would a flex-grow: 0.1 item, and a flex-grow: 0.01 item, etc., until finally the value is small enough to underflow to zero and the item suddenly takes up none of the free space
The minimum is 1 as value for flex-grow. If you add 1 it will take upp the remaining of the space there. Default value is 0 for flex-grow, that is why your two first divs only take up the space that their value do. You will notice that it will behave different using flex-grow, if you take your first div and add flex-grow: 1; it will be the size as your last one. If you on the other hand take flex-grow: 2; it will be larger then the other two, but not twice as large as it could be interrupted it to be. In real projects I rarely use anything but flex-grow: 1;, if I want something to be twice as large or anything along those lines I use flex-basis or width. Hope this helps.
Check my snippet. If you want it to take up a scpecific percentage then use flex-basis or width properties.
#container {
display: flex;
border: 1px dashed blue
}
#container div {
border: 1px dashed orange
}
.remaining-space {
flex-grow: 1;
background-color: deepskyblue;
}
<div id="container">
<div>1</div>
<div>2</div>
<div class="remaining-space">3</div>
</div>
I am attempting to create a layout using Flexbox. In one of these layouts, I want 3 equal width columns. To accomplish this I am using calc to set the column width. This is working fine in modern browsers, but of course in IE it doesn't want to work. Here is my code:
.container {
width:50vw;
margin:0 auto;
display:flex;
}
.container > div {
flex:1 0 calc(100% / 3);
}
<div class="container">
<div>Test</div>
<div>Test</div>
<div>Test</div>
</div>
As I mentioned, this works fine in modern browsers, but in IE the columns just collapse on each other unless I use a specific percentage in place of calc.
It's a known bug.
IE 10-11 ignore calc() functions used in flex shorthand declarations.
Since this bug only affects the flex shorthand declaration in IE 11, an easy workaround (if you only need to support IE 11) is to always specify each flexibility property individually.
source: https://github.com/philipwalton/flexbugs#flexbug-8
So, in other words, instead of:
flex: 1 0 calc(100% / 3)
Try:
flex-grow: 1;
flex-shrink: 0;
flex-basis: calc(100% / 3);
Also, consider this: You don't even need the calc() function.
If you want three equal width columns, this will do:
flex: 1
or
flex: 1 0 30%
or even:
flex: 1 0 26%;
With flex-grow: 1 defined in the flex shorthand, there's no need for flex-basis to be 33.33%.
Since flex-grow will consume free space on the line, flex-basis only needs to be large enough to enforce a wrap (should it become necessary).
In this case, with flex-basis: 26%, there's plenty of space for the margins, borders, padding, etc., but never enough space for a fourth item.
What is the difference in effect between setting flex: 1; and setting flex-grow: 1;? When I set the former in my code, the two columns I have display with equal width, while they do not do so when I set the latter.
This is strange, as I assumed that setting flex: 1; only affects the flex-grow property.
flex is a shorthand property of flex-grow, flex-shrink and flex-basis.
In this case, flex: 1 sets
flex-grow: 1
flex-shrink: 1
flex-basis: 0 (in old spec drafts it was flex-basis: 0%)
If you only use flex-grow: 1, you will have
flex-grow: 1
flex-shrink: 1
flex-basis: auto
Then, the difference is that the flex base size will be 0 in the first case, so the flex items will have the same size after distributing free space.
In the second case each flex item will start with the size given by its content, and then will grow or shrink according to free space. Most probably the sizes will end up being different.
In chrome I set an a child element of a display: flex element as flex: 0 0. I took this to mean no stretching or shrinking, however it shrinks to 0 pixels. Does 0 have a different meaning for stretch and shrink, or is this a bug in chrome?
EDIT Here's a fiddle http://jsfiddle.net/BPk4Q/
You want flex: none (which is a special value that's equivalent to flex: 0 0 auto).
The value you're currently using, flex: 0 0 (without the 'auto'), implies a flex-basis of 0%, which indeed tends to make things 0-sized (given that the flex-grow value is also 0). Quoting the flexbox spec about the flex shorthand:
<‘flex-basis’>
[...] When omitted from the flex shorthand, its specified value is 0%.
http://www.w3.org/TR/css3-flexbox/#flex-property
So, anyway, it sounds like you want flex: none.