如何使用 flexbox 右对齐 div 内的文本以获取多行内容

Question

我正在使用 flexbox 模型将 div 项向右对齐。 它在项目只有一行时有效，但当我有多行时，只有第一行右对齐。 如果 div 填充两行或多行，则下一行将向左对齐。

注意第一列的最后一个 div，以粗体显示。

这是一种使用 flexbox 使所有行的多行文本正确对齐的方法吗？

 /* CSS */ .wrapper { display: flex; flex-wrap: wrap; width: 100%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-9 { flex: 0 0 65%; max-width: 65%; margin-left: 20px; } .item-first-col { justify-content: flex-end; border: 1px solid blue; } .item-second-col { border: 1px solid blue; } .d-flex { display: flex; } .align-items-center { align-items: center; }

 <!-- HTML --> <div class="wrapper"> <div class="item-first-col col-md-3 d-flex"> One line text </div> <div class="item-second-col col-md-9 d-flex align-items-center"> Second column text </div> <div class="item-first-col col-md-3 d-flex"> One line text </div> <div class="item-second-col col-md-9 d-flex align-items-center"> Second column text </div> <div class="item-first-col col-md-3 d-flex" style="font-weight: bold;"> Here goes the text that fills two lines </div> <div class="item-second-col col-md-9 d-flex align-items-center"> Second column text </div> </div>

Answer 1

只需使用text-align: right;

 .wrapper { display: flex; flex-wrap: wrap; width: 100%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-9 { flex: 0 0 65%; max-width: 65%; margin-left: 20px; } .item-first-col { justify-content: flex-end; border: 1px solid blue; text-align: right; } .item-second-col { border: 1px solid blue; } .d-flex { display: flex; } .align-items-center { align-items: center; }

 <div class="wrapper"> <div class="item-first-col col-md-3 d-flex"> One line text </div> <div class="item-second-col col-md-9 d-flex align-items-center"> Second column text </div> <div class="item-first-col col-md-3 d-flex"> One line text </div> <div class="item-second-col col-md-9 d-flex align-items-center"> Second column text </div> <div class="item-first-col col-md-3 d-flex" style="font-weight: bold;"> Here goes the text that fills two lines </div> <div class="item-second-col col-md-9 d-flex align-items-center"> Second column text </div> </div>

谢谢和最好的问候！

Answer 2

您可以使用text-align css 属性

 /* CSS */ .wrapper { display: flex; flex-wrap: wrap; width: 100%; text-align: right; } .text { text-align: right; width: 100%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-9 { flex: 0 0 65%; max-width: 65%; margin-left: 20px; } .item-first-col { justify-content: flex-end; border: 1px solid blue; } .item-second-col { border: 1px solid blue; } .d-flex { display: flex; } .align-items-center { align-items: center; }

 <!-- HTML --> <div class="wrapper"> <div class="item-first-col col-md-3 text"> One line text </div> <div class="item-second-col col-md-9 align-items-center text"> Second column text </div> <div class="item-first-col col-md-3 text"> One line text </div> <div class="item-second-col col-md-9 align-items-center text"> Second column text </div> <div class="item-first-col col-md-3 text" style="font-weight: bold;"> Here goes the text that fills two lines </div> <div class="item-second-col col-md-9 align-items-center text"> Second column text </div> </div>

Answer 3

仅使用 Flexbox 属性无法按照您想要的方式对齐文本。

原因出现在Flexbox 规范中：

flex 容器的每个流入子项都成为一个 flex 项，并且每个连续的子文本运行序列都包装在一个匿名块容器 flex 项中。

在您的示例中，您可以对齐单行文本，但对齐的不是文本，而是包含它的匿名块。 这就是它起作用的原因。

它不适用于多行文本，因为编写更多文本只会增加匿名块的大小并拉伸以填充整个父div 。 此时，您将justify-content设置为什么值并不重要。

做你想做的事情的唯一方法是在匿名块将继承的父div上使用text-align:right ，使其包含的文本向右对齐。