CODEWITHSUNDEEP
htmlcssflexbox
john c. j.
john c. j.

Reputation: 1185

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

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/

Upvotes: 19

Views: 20508

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371719

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>

Upvotes: 44

Mosset J&#233;r&#233;mie
Mosset J&#233;r&#233;mie

Reputation: 310

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.

Upvotes: 1

Related Questions