title: Break line using Flex keeping elements centered
body: <p>This is another CSS Flex question, I'm sorry but I've been struggling a lot using Flex, I'm trying to make a kind of slider, in which it will have a left and right arrow and elements in between, like so:</p>
  
  <p><a href="https://i.stack.imgur.com/lhfYI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lhfYI.png" alt="Flex-el"></a></p>
  
  <p>The problem I'm facing is that in certain number of elements I need to break a line, keeping the alignment center both vertically and horizontally, like this: (paint pro editing)</p>
  
  <p><a href="https://i.stack.imgur.com/HF9fd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HF9fd.png" alt="Flex-2"></a></p>
  
  <p>I can't find a way to do this, I'm lost.</p>
  
  <p>This is my actual code for the first image:</p>
  
  <p>HMTL:</p>
  
  <pre><code>&lt;div class="main allin"&gt;
    &lt;div class="left-arrow"&gt;
      &lt;i class="material-icons"&gt;keyboard_arrow_left&lt;/i&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-con "&gt;
      &lt;div class="item-1"&gt;
        &lt;img src="https://via.placeholder.com/250" /&gt;
      &lt;/div&gt;
  
      &lt;div class="item-2"&gt;
        &lt;img src="https://via.placeholder.com/250" /&gt;
      &lt;/div&gt;
  
      &lt;div class="item-3"&gt;
        &lt;img src="https://via.placeholder.com/250" /&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
      &lt;div class="right-arrow"&gt;
        &lt;i class="material-icons"&gt;keyboard_arrow_right&lt;/i&gt;
    &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div class="main break"&gt;
    &lt;div class="left-arrow"&gt;
      &lt;i class="material-icons"&gt;keyboard_arrow_left&lt;/i&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.main{
    display:flex;
    justify-content: center;
     align-items: center;
  }
  
  .flex-con{
    display:flex;
    align-items: center;
  }
  
  .flex-con div{
    padding:20px;
  }
  </code></pre>
  
  <p>And this is a <a href="https://codepen.io/elunap/pen/wZpXGm" rel="nofollow noreferrer">CodePen</a></p>
  
  <p>How can I achieve this? thanks.</p>