甚至垂直和水平对齐flexbox

Question

基本上我有三个项目与flexboxes连续排列，但它有效但垂直对齐有一个奇怪的问题。 截图：   Fiddle Demo

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

提前致谢， 迭

Answer 1

https://firebasestorage.googleapis.com/v0/b/app-abdf9.appspot.com/o/real_db%2Fuser%2FILzu2nUGdVZQ06MFhcAd3rmyvaM2%2Fprofile_photo?alt=media&token=1ce9b3b7-2884-4429-9a03-1632d10a7251

.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>