Is there a difference between flex: none
and leaving the flex property undefined?
I tested it in several simple layouts and I don't see the difference.
For example, I could remove flex: none
from blue item (see code below), and the layout, as I understand, remains the same. Does I understand it right?
And, the second question, what about more complex layouts? Should I write flex: none
or I can simply omit it?
.flex-container {
display: flex;
width: 400px;
height: 150px;
background-color: lightgrey;
}
.flex-item {
margin: 10px;
}
.item1 {
flex: none; /* Could be omitted? */
background-color: cornflowerblue;
}
.item2 {
flex: 1;
background-color: orange;
}
.item3 {
flex: 1;
background-color: green;
}
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>
https://jsfiddle.net/r4s8z835/
flex: none; This is equivalent to flex: 0 0 auto . It sizes the item according to its width / height properties, but makes it fully inflexible. This is similar to flex: initial except it is not allowed to shrink, even in an overflow situation.
The flex property sets the flexible length on flexible items. Note: If the element is not a flexible item, the flex property has no effect.
The flex property is a shorthand property for the flex-grow , flex-shrink , and flex-basis properties.
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.
The default propery is flex: 0 1 auto, while flex: none changes it to flex: 0 0 auto. for example if I reduce your container size and apply overflow:scroll this happens.
The default propery is flex: 0 1 auto, while flex: none changes it to flex: 0 0 auto. for example if I reduce your container size and apply overflow:scroll this happens. Thanks for contributing an answer to Stack Overflow!
The flex property is a shorthand property for: The flex property sets the flexible length on flexible items. Note: If the element is not a flexible item, the flex property has no effect.
Note: If the element is not a flexible item, the flex property has no effect. Default value: 0 1 auto. Inherited: no. Animatable: yes, see individual properties. Read about animatable. Version:
Is there a difference between
flex: none
and leaving the flex property undefined?
flex: none
is equivalent to flex: 0 0 auto
, which is shorthand for:
flex-grow: 0
flex-shrink: 0
flex-basis: auto
Simply put, flex: none
sizes the flex item according to the width / height of the content, but doesn't allow it to shrink. This means the item has the potential to overflow the container.
If you omit the flex
property (and longhand properties), the initial values are as follows:
flex-grow: 0
flex-shrink: 1
flex-basis: auto
This is known as flex: initial
.
This means the item will not grow when there is free space available (just like flex: none
), but it can shrink when necessary (unlike flex: none
).
I could remove
flex: none
from blue item (see code below), and the layout, as I understand, remains the same.
In terms of your demo, the reason there is no difference when flex: none
is removed is that the two siblings (.item2
and .item3
) are flexible (flex: 1
), and there is enough space in the container to accommodate the content of .item1
.
However, if .item1
had more content, flex: none
would make a big difference.
revised fiddle
.flex-container {
display: flex;
width: 400px;
height: 150px;
background-color: lightgrey;
}
.flex-item {
margin: 10px;
}
.item1 {
flex: none; /* Now try removing it. */
background-color: cornflowerblue;
}
.item2 {
flex: 1;
background-color: orange;
}
.item3 {
flex: 1;
background-color: green;
}
<div class="flex-container">
<div class="flex-item item1">flex item 1 flex item 1 flex item 1 flex item 1flex item 1 flex item 1flex item 1flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With