横並びのliの中の画像を上下中央揃え、文字を下揃えにしたい

Question

前提・実現したいこと

現在、横並びで３列の画像一覧を作成中です。
ただ元々の画像の大きさが、バラバラで、なおかつ、
今後のメンテナンスから、画像はトリミングをせずに
CSSで画像は中央寄せ、文字は下揃えにしたいと考えています。
liの高さは統一して、画像も文字も中央寄せまでできたのですが、
文字だけ下揃えが実現できませんでしたので、どなたかご教授いただけますでしょうか？

発生している問題

現在はこのような形です。

該当のソースコード

html部分

<div class="postList">
 <ul class="list3">  
  <li>
   <a href="/"><img src="" /></a>
   <br><a href="/">画像のタイトル/a>
  </li>		
  <li>
   <a href="/"><img src="" /></a>
   <br><a href="/">画像のタイトル/a>
  </li>	
  <li>
   <a href="/"><img src="" /></a>
   <br><a href="/">画像のタイトル/a>
  </li>
以下続きます	
 </ul>
</div>

CSS部分

ul.list3 {
        width: 100%;
        flex-wrap: wrap;
        display: flex;
    }
    ul.list3>li:nth-child(3n+1) {
        clear: both;
    }
    ul.list3>li {
        display: table-cell;
        float: left;
        width: 33%;
        padding: 0px 2px;
        display: -webkit-box;
        display: -moz-box;
        display: -o-box;
        display: -ms-box;
        display: box;
        -webkit-box-align: center;
        -moz-box-align: center;
        -o-box-align: center;
        -ms-box-align: center;
        box-align: center;
    }

試したこと

そもそも<br>ではダメだと思い、色々と変えたのですが、画像と文字がセットで動いてしまいました。

環境

WordPressのloop内のため、個別に高さを指定することができませんでした。

Comments

[kei344]

「発生している問題」の部分はコードでないので、コードブロック（```）で囲む必要はありません。（コードブロックで囲むと画像が表示されません）

[serizawa3]

ご指摘ありがとうございます。
画像きちんと表示されるようにしました

Answer 1

子要素もflexにすれば（モダンブラウザであれば）出来ると思います。

    ul.list3>li {
        width: 33%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    li > a:first-child {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
```**動くサンプル：**[https://jsfiddle.net/x82dm0tv/](https://jsfiddle.net/x82dm0tv/)

Comments

[serizawa3]

サンプルまで作成して頂いて、ありがとうございました。
無事に再現することができました。
a:first-child　の使い道をもっと実践できるようにしたいと思います。

Answer 2

ul.list3 {
  align-items: flex-end;
}

Comments

[serizawa3]

ご返答ありがとうございます。
flex-endというものを使ったことがなかったので、
flex-endについて理解を深めたいと思います。
ありがとうございました。