title: adding animation to flex-wrap
body: <p>when it comes to wrap point how can we add animation?</p>
  
  <p>maybe this can help:</p>
  
  <p>we have a header and inside of that header we have container with flex attr and the direction is column when we resize our browser from bottom to top or when we changing height of browser those items suddenly reshape , I just want to add animation to this event.thx     </p>
  
  <pre><code>&lt;header&gt;
          &lt;div class="container"&gt;
              &lt;div class="item1 item"&gt;&lt;/div&gt;
              &lt;div class="item2 item"&gt;&lt;/div&gt;
              &lt;div class="item3 item"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;
  
  
  header {
          width: 200vw;
          max-height: 100vh ;
      }
  
  
  .container{
          display: flex;
          max-height:100vh;
          flex-direction: column;
          flex-wrap: wrap;
          align-content:flex-start;
  }
  
  
  
  .item1 {
      background-color: red;
      height: 200px;
      flex: 1 0 150px;
  }
  
  
  .item2 { 
      background-color: blue;
      height: 200px;
      flex: 1 0 150px;
  
  }
  
  
  .item3 { 
      background-color: orange;
      height: 200px;
      flex: 1 0 150px;
  
  }
  </code></pre>