17

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/

2 Answers 2

38

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>

4
  • 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, 2017 at 23:03
  • Mistyped. I mean, the difference between omitted and none. Here is updated fiddle: jsfiddle.net/r4s8z835/5
    – john c. j.
    Jan 20, 2017 at 23:14
  • 1
    There's also another factor to consider: stackoverflow.com/q/36247140/3597276 Jan 20, 2017 at 23:18
  • 1
    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 . jsfiddle.net/r4s8z835/6 Jan 21, 2017 at 3:35
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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