Even Vertical and horizontal align flexbox

Question

Basically I have three items aligned in a row with flexboxes and it worked however there is a weird issue with the vertical align. Screenshot: Fiddle Demo

.flex-container {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}

.points {
  flex: 1;
  vertical-align: top;
}

.p1 {
  align-self: flex-start;
}

.p2 {
  align-self: center;
}

.p3 {
  align-self: flex-end;
}

<div class="textcenter">
  <h1>Lorem Ipsum</h1>
  <h4>dolor sit amet, consectetur adipiscing</h4>
</div>

<div class="flex-container bg">
  <div class="points p1 textcenter">
    <h3>Support for most popular<br>languages and frameworks</h3>
    <p></p>
  </div>

  <div class="points p2 textcenter">
    <h3>Open Source</h3>
  </div>

  <div class="points p3 textcenter">
    <h3>Constantly Growing</h3>
  </div>
</div>

Thanks in advance, Diego

Answer 1

Revise Fiddle

.flex-container {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: cadetblue;
}

.points {
  flex: 1;
  vertical-align: top;
  text-align: center;
}

p1,p2,p3 {
}

<div class="textcenter">
   <h1>tutorial-db</h1>
   <h4>The Ultimate Coding Recource Database</h4>
</div>

<div class="flex-container bg">
   <div class="points p1 textcenter">
      <h3>Support for most popular<br>languages and frameworks</h3>
      <p></p>
   </div>

   <div class="points p2 textcenter">
      <h3>Open Source</h3>
   </div>

   <div class="points p3 textcenter">
      <h3>Constantly Growing</h3>
   </div>
</div>