使用flex在Ant设计表上对齐项目

Question

我正在使用Ant设计表，并在CSS中使用flex。表格的外观如下（files-list-table）：

我对此表的预期行为是将操作项（下载+删除/打开+删除）与顶部的Action标头垂直对齐。 Ant design的文档显示默认情况下它们会对齐，但对我而言不是。这是其中一个动作单元格的屏幕截图：

这是我用于此表的CSS：

     /* this container is for the entire page */
     .files-page-container{
        width: 100%;
        display: flex;
       flex-direction: column;
       flex: 1 1 auto;
       align-items:center;
     }

     .files-list-table{
        width: 80%;
      }

     .table-cell{
        display: flex; 
        margin-left: auto; 
      }

      .table-action{
         padding-left: 30%;
      }

我遇到的问题是为了使操作项与顶部的Action标头对齐，我需要向其中添加padding-left，在这种情况下这并不理想，因为在我更改屏幕尺寸，对齐方式中断。我尝试在display:flex和table-cell上进行table-action，但这会使情况变得更糟。这导致文件/文件夹名称位于表格的中心。我有什么方法可以对齐操作项目而无需对其进行硬编码并确保它们具有响应能力？