title: CSS Flexbox: align flex item with different width
body: <p>I'm trying to align some flex items with different widths. I can not hit some elements.
  <a href="https://jsfiddle.net/sistel/m1vu9exf/2/" rel="nofollow noreferrer">https://jsfiddle.net/sistel/m1vu9exf/2/</a></p>
  
  <p>I cannot align the texts and colored squares as shown in this figure <a href="http://www.farmacom.it/baseball.jpg" rel="nofollow noreferrer">http://www.farmacom.it/baseball.jpg</a></p>
  
  <pre><code>.flex-container-4 {
    display: flex;
    height: 70px;
    align-items: center;
    background-color: Black;
    justify-content: space-around;
    position:relative;
  }
  
  .flex-container-4 &gt; div {
    background-color: BLACK;
    width: 500px;
    margin: 5px;
    text-align: center;
    line-height: 50px;
    font-size: 40px;
    color: white;
  }
  </code></pre>