横並びの要素の中にある文字の量が異なる場合も高さを揃えて中央寄せ

メニューなど文字量が異なる要素を横に並べたい場合があります。
その際、display: flexを使用すればメニュー範囲の高さは揃いますが、文字が上揃いで不格好になるため、子要素にもdisplay:flexを与えて上下中央寄せにします。

HTML(Pug)

ul
  li: a メニュー01
  li: a
    | メニュー02
    br
    | メニュー02
  li: a メニュー03メニュー03メニュー03

CSS(SCSS)

ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  li {
    display: flex;
    width: 32%;
    a {
      background-color: gray;
      box-sizing: border-box;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
      padding: 12px 30px;
    }
  }
}