"Flex: none" vs. Non-specified (omitted) flex property

Question

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/

Michael Benjamin · Accepted Answer · 2017-01-20T22:33:01.773

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>

Thank you very much for detailed explanation, it's an excellent answer. As I understand from it, if one of the siblings (the blue one) have fixed width (assuming it is an image or input field), it would not be the difference between omitted and `auto` for it? — john c. j., Jan 20 '17 at 23:03
Mistyped. I mean, the difference between omitted and `none`. Here is updated fiddle: https://jsfiddle.net/r4s8z835/5/ — john c. j., Jan 20 '17 at 23:14
There's also another factor to consider: http://stackoverflow.com/q/36247140/3597276 — Michael Benjamin, Jan 20 '17 at 23:18
As referenced in the link in my previous comment, flex items cannot, by default, shrink below the size of their content. The initial setting on flex items is `min-width: auto`; You need to override this default with the `overflow` property or `min-width: 0` . https://jsfiddle.net/r4s8z835/6/ — Michael Benjamin, Jan 21 '17 at 03:35

Mosset Jérémie · Answer 2 · 2017-01-20T22:11:09.717

According to https://css-tricks.com/almanac/properties/f/flex/#article-header-id-4 the difference between these is that flex:none will not shrink in an overflow situation. The default propery is flex: 0 1 auto, while flex: none changes it to flex: 0 0 auto.

<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>

<div class="flex-container">
  <div class="flex-item item1 item-1-flex-none">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>  
</div>
.flex-container {
  display: flex;
  width: 100px;
  height: 150px;
  overflow:scroll;
  background-color: lightgrey;
}

.flex-item {
  margin: 10px;
}

.item1 {
  background-color: cornflowerblue;
}

.item2 {
  flex: 1;
  background-color: orange;
}

.item3 {
  flex: 1;
  background-color: green;
}


.item-1-flex-none{flex:none;}

https://jsfiddle.net/r4s8z835/2/

for example if I reduce your container size and apply overflow:scroll this happens.

"Flex: none" vs. Non-specified (omitted) flex property

2 Answers2