title: CSS Flexbox: difference between align-items and align-content
body: <p>I find the difference between <code>align-items</code> and <code>align-content</code> in CSS Flexbox properties extremely confusing. I've been looking at the documentation, and several examples online for hours, but I still can't fully grasp it.</p>
  <p>To be more precise, <code>align-items</code> makes total sense to me and it's completely clear how it behaves. On the other hand, <code>align-content</code> is not clear at all. In particular, I don't understand why we should use two different properties depending on whether the content all fits in one line or multiple ones.</p>
  <p>What is the explanation in layman's terms?</p>