无法在UL内垂直对齐按钮

<ul style="display: flex; flex-direction: column; align-items: flex-start;">
  <li><button>按钮1</button></li>
  <li><button>按钮2</button></li>
  <li><button>按钮3</button></li>
</ul>

<ul style="display: table;">
  <li style="display: table-row;"><button style="display: table-cell;">按钮1</button></li>
  <li style="display: table-row;"><button style="display: table-cell;">按钮2</button></li>
  <li style="display: table-row;"><button style="display: table-cell;">按钮3</button></li>
</ul>