CodePen Embed - Align items vs Justify Content

<h4>Flex row (main axis is horizontal)</h4>
<div class="flex-row">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<h4>Flex Multiline (align-content works here)</h4>
<div class="flex-row multiline">
  <div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
<h4>Flex column (main axis is vertical)</h4>
<code>justify-content</code> works on the vertical axis, while <code>align-items</code> works on the horizontal column.
<div class="flex-column">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.flex-row {
  display:flex;
  flex-direction:row;
  border: 1px solid #ccc;
  justify-content: center;
  margin-bottom: 20px;
}

.multiline {
  flex-wrap: wrap;
  height: 250px;
  align-content: center;
}

.flex-column {
  display:flex;
  flex-direction:column;
  border: 1px solid #ccc;
  align-items: center;
  height: 300px;
  justify-content: flex-end;
}


.child {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 15px;
  background: green; 
}

Run Pen

This Pen is owned by Anirudh Varma on CodePen.

See more by @thebigfatpanda12 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.