如何实现flex行内文本列右对齐且保留原有边框与内边距效果

问题原因 #

1. float 属性在flex布局的子元素上会被自动忽略，因此完全不生效。
2. 直接给元素加text-align: right没效果，是因为当前结构里的文本容器宽度默认由内容撑开，没有多余的水平空间供文本对齐，所以看不出变化。

解决方案（两种方案均不会改动原有内边距、边框位置） #

方案1：调整flex容器的交叉轴对齐

作为单元格的外层容器（带w-25/w-40/w-10类的.flex元素）默认是垂直排列子项（flex-direction: column），交叉轴对应水平方向，直接给这类容器加align-items: flex-end即可让所有子项自动靠右对齐：

/* 匹配所有作为单元格的flex容器 */
.flex[class*="w-"] {
  align-items: flex-end;
}

该方案改动量最小，适合需要所有单元格统一右对齐的场景。

方案2：给文本容器设满宽后加对齐属性

给包裹文本的子元素设置100%宽度，撑满整个单元格的可用空间，再添加text-align: right即可生效，原有内边距会完整保留：

/* 匹配所有包裹文本的子元素 */
.flex[class*="w-"] > * {
  width: 100%;
  text-align: right;
}

该方案灵活度更高，适合需要单独控制部分单元格对齐方式的场景。

内容的提问来源于stack exchange，提问作者Joshua Ohana