在flexbox中将文本右对齐

Question

我有一个flexbox，其中的元素是“ p”元素。

我正在尝试将其正确对齐，但是它仍然无法正常工作，并且所有内容都仍居中对齐。

.box1{
    display: flex;
    flex-direction: column;
    text-align: right;
    justify-content: space-between;
    font-family: 'Merriweather', sans-serif;
    font-size: 60px;
    width: 30%;
}

是否可以正确对齐？

Answer 1

align-items: flex-end;会将<p>元素对齐到容器的右侧，但前提是容器的宽度大于子项的宽度。

div {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  box-sizing: border-box;
  border: solid red 3px;
}

p {
  width: 100px;
  text-align: right; // you might also want to use this so that your text is aligned to the far right side.
  box-sizing: border-box;
  border: solid lime 3px;
}

<div>
  <p>Testing 1...</p>
  <p>Testing 2...</p>
  <p>Testing 3...</p>
  <p>Testing 4...</p>
</div>

Flex框可能有点棘手，因为justify-content属性始终将内容沿flex框的同一方向对齐（即，垂直对齐列，水平对齐对齐行），而align-items始终将内容对齐横向（即，水平方向用于列，垂直方向用于行）。例如...

display: flex;
flex-direction: column;
justify-content:; /* aligns content vertically */
align-items:; /* aligns content horizontally */

display: flex;
/* flex-direction: row; is the default value */
justify-content:; /* aligns content horizontally */
align-items:; /* aligns content vertically */

Answer 2

将文本对齐方式应用于段落：

.box1 p {
  text-align: right;
}