What are the differences between flex-basis and width?

Question

There have been questions and articles about this, but nothing conclusive as far as I can tell. The best summary I could find is

flex-basis a

Answer 1

In addition to Michael_B's excellent summary it's worth repeating this:

flex-basis allows you to specify the initial/starting size of the element, before anything else is computed. It can either be a percentage or an absolute value.

The important part here is initial.

By itself, this does resolve to width/height until the other flex grow/shrink properties come into play.

So. a child with

.child {
 flex-basis:25%;
 flex-grow:1;
}

will be 25% wide initially but then immediately expand as much as it can until the other elements are factored in. If there are none..it will be 100% wide/tall.

A quick demo:

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}

  
Some Content


  
Some Content


  
Some Content

Experimenting with the flex-grow, flex-shrink and flex-basis (or the shorthand flex :fg fs fb)...can lead to some interesting results.