2

A flex property with only one value and it being a width value, should be 'flex-basis' according to MDN, however, these two different lines of code give different results.

.box > div {
  border: 2px solid rgb(96, 139, 168);
  background: rgba(96, 139, 168, .2);
  flex: 180px;

.box > div {
  border: 2px solid rgb(96, 139, 168);
  flex-basis: 180px;
  • 2
    flex , sets default values for flex-grow, flex-shrink and flex-basis, flex-basis only gives a value to .. flex-basis ;) flex:180px is not a valid value anyway – G-Cyrillus Nov 14 '19 at 21:21
  • The title of this thread may be answered by the referenced articles, but they do not answer the problem described here. The default for `flex-grow` is `0`. But it seems the default value for `flex-grow` changes from `0` to `1` if you set a _width-value_ to `flex` using the [one-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/flex#Syntax), e.g. the given `flex: 180px`. I can watch this behaviour in Firefox and Chromium, too, but I can't find it in the docs. – Steffen Bobek Nov 24 '19 at 12:39

0 Answers0