20

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/

Improve this question

2 Answers 2

Reset to default
47

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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?
Mistyped. I mean, the difference between omitted and none. Here is updated fiddle: jsfiddle.net/r4s8z835/5
There's also another factor to consider: stackoverflow.com/q/36247140/3597276
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
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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.