title: Flexbox cropping and centering
body: <p>I'm using Flexbox to center images in a box. It works well for smaller images that fit into <code>.item</code>, but larger images (>216px) are not centred and don't crop equally on all sides. What can I do?</p>
  
  <pre><code>.item {
      overflow-x: hidden;
      overflow-y: hidden;
      width: 216px;
      height: 216px;
      display: flex;
      justify-content: center;
      justify-items: center;
      align-items: center;
  }
  
  .item img {
      background-color: #ccc;
  }
  </code></pre>