如何使用 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 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 2

只需使用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 3

仅使用 Flexbox 属性无法按您希望的方式对齐文本。

Flexbox specification 中出现的原因：

Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item.

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

它不适用于多行文本，因为写入更多文本只会增加匿名块的大小并延伸以填充整个父块 div。到那时，您将 justify-content 设置为什么值都没有关系。

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

如何使用 flexbox 右对齐 div 中的多行内容

How to right align text inside a div for mutiline content using flexbox

html

css

flexbox

alignment