title: Flexbox Item Animation
body: <p>I have a flexbox container which increases in width when I hover over it. The items in the flexbox just move traditionally when this happens. How can I animate the movement of items in the flexbox?</p>
  
  <p>Here's <a href="https://jsfiddle.net/kpcgru81/4/" rel="nofollow noreferrer">a link</a> to what I've tried. </p>
  
  <p>I've tried using flex-direction and transition, but no luck.
  This is the code block that triggers the hover:</p>
  
  <pre><code>section:hover{
     width: 500px;
  }
  </code></pre>