title: What are the differences between flex-basis and width?
body: <p>There have been questions and articles about this, but nothing conclusive as far as I can tell. The best summary I could find is</p>
  
  <blockquote>
    <p><em>flex-basis</em> 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.</p>
  </blockquote>
  
  <p>...which in itself doesn't say much about the behavior of elements with <em>flex-basis</em> set. With my current knowledge of flexbox I don't see why that couldn't describe <em>width</em> also.</p>
  
  <p>I'd like to know how exactly <em>flex-basis</em> is different from <em>width</em> in practice:</p>
  
  <ul>
  <li>If I replace <em>width</em> with <em>flex-basis</em>(and vice versa), what will change visually?</li>
  <li>What happens if I set both to a different value? What happens if they have the same value?</li>
  <li>Are there some special cases where using either <em>width</em> or <em>flex-basis</em> would have a significant difference to using the other?</li>
  <li>How do <em>width</em> and <em>flex-basis</em> differ when used in conjunction with other flexbox styles, such as <em>flex-wrap</em>, <em>flex-grow</em> and <em>flex-shrink</em>?</li>
  <li>Any other significant differences?</li>
  </ul>
  
  <hr>
  
  <p><strong>Edit/clarification</strong>: This question has been asked in a different format in <a href="https://stackoverflow.com/questions/23569229/what-exactly-flex-basis-property-sets">What exactly flex-basis property sets?</a> but I felt a more direct comparison or summary of the differences of <em>flex-basis</em> and <em>width</em> (or <em>height</em>) would be nice.</p>