要素を縦に並べたものを右寄せしたいです

Question

要素の部分を縦並びのまま右寄せにしたい（青の右辺にくっつけたい。ただ三つ目の白丸の1行目の要素は白丸のなかで真ん中のままにしたい。）

<div class="wrapper">
    <p>要素</p>
    <p>要素要素</p>
    <p>要素<br>要素</p>
</div>

.wrapper {
    color: white;
    background-color: blue;
    height: 550px;
    max-width: 400px;
    margin: 0 auto;
    background-color: blue;
    text-align: center;


    // 縦に並べる
    display: flex;
    flex-direction: column;
    align-items: center; //centerで真ん中にはなるがstartにしてもendにしても右寄せにはならない
}

.wrapper p {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
    padding: 5px 5px;
    border: solid 1.5px;
    border-radius: 30px;
    box-sizing: border-box;
    line-height: 20px;
}

「flex-direction: column;」を使って縦並びにはできました。
align-itemsを使って、startにすると左寄せ、centerにすると中央寄せにもできました。
しかし右寄せにはできません。
valueをendするのかとも思ったのですが、startと同じく真ん中寄せになってしまいます。
flexで縦並びで右寄せにする方法はないのでしょうか。

Answer 1

申し訳ありません、自己解決いたしました、、

「align-items」を「flex-end」にしただけで右端になりました。
「end」とは別に「flex-end」というものがあるんですね。

MozillaのサイトのCSSを一見した際は、valueは「stretch」「center」「start」「end」しかないと思ってましたが、ページの下の方を見ると他にもいろいろなvalueがあることに気づきました。

不注意でした。

ご回答いただいた方、ありがとうございました。感謝いたします。

Answer 2

ちょっと手を入れました。

<div class="wrapper">
  <div class="wrapper-2">
    <p>要素</p>
    <p>要素要素</p>
    <p>要素<br>要素</p>
  </div>
</div>

.wrapper {
    color: white;
    background-color: blue;
    height: 550px;
    max-width: 400px;
    margin: 0 auto;
    background-color: blue;
    display: flex;
    justify-content: flex-end;
}

.wrapper-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wrapper-2 p {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
    padding: 5px 5px;
    border: solid 1.5px;
    border-radius: 30px;
    box-sizing: border-box;
    line-height: 20px;
}