在flex行中右对齐文本列

Question

我正在用flexbox构建一个网格，由于边界问题和填充问题，我提出了下面的html结构

https://jsfiddle.net/rqmdxcjo/

<div class="flex">
  <div class="flex w-40">
    <h3 class="pr-6 py-0.5">Row A</h3>
  </div>
  <div class="flex w-25 border-right">
    <div class="py-0.5 px-6">AAA</div>
    <div class="py-0.5 px-6">AAA</div>
  </div>
  <div class="flex w-25 border-right">
    <div class="py-0.5 px-6">AAA</div>
    <div class="py-0.5 px-6">AAA</div>
  </div>
  <div class="flex w-10">
    <div class="pl-6 py-0.5">AAAA</div>
  </div>
</div>

这是一个很好的结果，并显示为

行

唯一的问题是当你有不同的长度字符串时，在这个例子中，AAA对AAAA比AAAA。在图片和小提琴，你会看到在这些线上，文字保持左对。我试着纠正这段文字，但其他的一切都保持不变。我试过在不同的点上应用浮动:右和文本对齐，但都没有效果。

​

​

https://jsfiddle.net/rqmdxcjo/

如何在这些单元格中正确地对齐测试，同时保持填充和边框位置？

Answer 1

如果我理解正确，您希望正确地对齐包含文本、AAA、AAAA等内容的div。它不适用于您现有的代码，因为这些div只与它们的内容一样大。因此，即使text-algn: right;被应用于它们，它们也只有"AAAA“那么大，而且看起来它们的排列也不对。使用以下方法给出这些div的宽度：

.flex.border-right div {
  flex: 1 1 50%;
  text-align: right;
}

我使用.flex.border-right div针对这些div，但如果需要，可以添加您自己的类。

更新Fiddle