How to align flexbox items to the most left, the most right and center?

Question

I have a flexbox container row and there are three items inside. I want one of them to be in the very center but I want the other two 2 to be slightly over it and to the most left and to the most right respectively. I want something like this:

I tried with aligning and justify content but it did not work.

Thanks in advance.

Answer 1

Here is an illustration of what you want. Just give the middle element a margin-top:

.container {
  display: flex;
  justify-content: space-between;
}

.container div {
  width: 50px;
  height: 100px;
  background-color: red;
}

.center {
  margin-top: 50px;
}

<div class="container">
  <div class="right"></div>
  <div class="center"></div>
  <div class="left"></div>
</div>