Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

flexbox

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/

like image 633
john c. j. Avatar asked Jan 20 '17 21:01

john c. j.


People also ask

What does flex none mean?

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.

What is flex property in Flex?

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.

What is a different property that can be applied to flex items?

The flex property is a shorthand property for the flex-grow , flex-shrink , and flex-basis properties.

What Flex 1 means?

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.

What is the difference between'flex'and'flex none'?

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.

What is the difference between flex 0 1 auto and none?

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!

What is the Flex property in HTML?

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.

What is the default value of the Flex property?

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:


1 Answers

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>
like image 103
Michael Benjamin Avatar answered Oct 09 '22 03:10

Michael Benjamin