Flexbox 高さが異なる3つの要素を、横並びand高さ中央に揃えるには？

Question

flexboxを利用して、
添付のイメージ画像のように、高さが異なる３つの要素を　横並びand右寄せand高さを中央に揃える　には
どのような記述をすればよいのでしょうか？色々複合しているためか自力で再現できませんでした。
よろしくお願いいたします。

Comments

[m.ts10806]

まず現状でご自身が組まれたコードを提示してください。

Answer 1

こんにちは。

こんな感じですか？

【フレックスコンテナ】{
    display: flex;
    align-items: center;
    justify-content: right;
}

Answer 2

下記のような感じでどうでしょう。

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

.flex-container {
  display: flex;
  justify-content: flex-end;
  align-items:center;
}