<article class="flex-direction-column">
  <h2>To center align items using flex:</h2>
</article>

<p><strong>flex-direction: row;</strong> needs <strong>justify-content: center;</strong></p>
<article class="flex-direction-row">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>
<p><strong>flex-direction: column;</strong> needs <strong>align-items: center;</strong></p>
<article class="flex-direction-column">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>

article
  width: 100%
  &:first-child
    margin-bottom: 1.5em

.flex-direction-row
  display: flex
  flex-direction: row
  justify-content: center
  
.flex-direction-column
  display: flex
  flex-direction: column
  align-items: center

section
  width: 10%
  height: 10em
  background: skyblue
  &:nth-of-type(odd)
    background: salmon

p
  text-align: center