выравнивание текста вправо во 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>

Флекс-боксы могут быть немного хитрыми, поскольку свойство justify-content всегда выравнивает содержимое в одном и том же направлении флекс-бокса (то есть по вертикали для столбцов и по горизонтали длястроки), тогда как 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;
}