1图子元素是 p，具有样式 margin: auto。
2图子元素是 li。

ps: 原来以为 margin: auto 垂直居中只针对绝对定义元素，原来flex也适用。

你自己代码css样式 .flex{}中最后两行align-items:flex-start;-webkit-align-items:flex-end;所以你的li会在最下面；
补充：

<style type="text/css">
  .wrap1{
    display:flex;
    width: 200px;
    height: 100px;
    border:1px red solid;
    margin:0 auto;
  } 
  .a{
    width: 20px;
    height: 20px;
    margin:auto;
    background-color: blue;
  }
  .wrap2{
    display:flex;
    width: 200px;
    height: 100px;
    border:1px red solid;
    margin:0 auto;
    align-items:flex-start;
  }
  .b{
    width: 20px;
    height: 20px;
    margin-left: 20px;
    background-color: green;
  }
  .wrap2 p:nth-child(1){
    margin-top:20px;
  }
  .wrap2 p:nth-child(2){
    margin-top:50px;
  }
  .wrap2 p:nth-child(3){
    margin-top:70px;
  }
</style>
<p class="wrap1">
    <p class="a"></p>
    <p class="a"></p>
    <p class="a"></p>
</p>
<p class="wrap2">
    <p class="b"></p>
    <p class="b"></p>
    <p class="b"></p>
</p>

运行上面代码你会发现，第一：父元素设置flex后，子元素的margin：atuo属性不仅在左右方向有作用，也对上下有作用。第二：设置align-items:flex-start后，子元素的排列会受自身margin影响。