Flexbox - align one item in the center and the others around

Question

I'm looking for a slightly modified version of the justify-content: center. Instead of justifying everything in the center I'd like to have one specific item in the center and all around it. Like in the image.

<div class="wraper">
    <span>1</span>
    <span>2</span>
    <span>Centre</span>
    <span>3</span>
</div>

.wrapper {
    display: flex;
    justify-content: center;
}

What the above code does:

What I need:

How to achieve this?

Answer 1

Here is my best attempt at it (kind of reorganizing the elements a bit).

* {
  box-sizing: border-box;
}

span {
  display: inline-block;
}

span:not(.inner) {
  padding: 10px;
  margin: 2px;
  background: lightgray;
}

.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.inner {
  display: flex;
  flex-basis: 40%;
}

.a {
  justify-content: end;
}

.b {
  justify-content: center;
  flex-basis: 20%;
}

.b > span {
  text-align: center;
  width: 100%;
}

.c {
  justify-content: start;
}

<div class="wrapper">
  <span class="inner a">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </span>
  <span class="inner b">
    <span>Center</span>
  </span>
  <span class="inner c">
    <span>5</span>
    <span>6</span>
  </span>
</div>

<div class="wrapper">
  <span class="inner a">
    <span>1</span>
    <span>2</span>
  </span>
  <span class="inner b">
    <span>Center</span>
  </span>
  <span class="inner c">
    <span>3</span>
  </span>
</div>