Flexbox. Putting one object from row in center (without knowing the size of other objects)

I work on the header for a website and I have a problem with a flexbox. I want to put the logo (item2) in the perfect center no matter what items will be in item 1 or 3. The item1 I want to be always to be on the left and object 3 always to be on the right. Also if considered the object in the second box is an SVG graphic.

CSS:

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

}
.item2 {

}
.item3 {

}

HTML:

<header>
    <div class="item">
        Menu1 Menu2 Menu3 Menu4
    </div>

    <div class="item2">
        logo
    </div>

    <div class="item3">
        PL/ENG
    </div>
</header>

It would be really nice if someone could help me solve this thing.

Edit: I changed code a bit to properly represent what I'm struggling with.

Solution

This can be done in more than one way, and by adding a background color, you'll see how they behave somewhat different.

You can give the outer most items flex: 1 (and I also removed justify-content: space-between)

header {
    display: flex;
}
.item {
  flex: 1;
}
.item2 {

}
.item3 {
  flex: 1;
  text-align: right;
}
header > div {
  background: lightgray;
  border: 2px dotted red;
}
header > .item2 {
  background: lightblue;
}

<header>
    <div class="item">
        Menu1 Menu2 Menu3 Menu4
    </div>

    <div class="item2">
        logo
    </div>

    <div class="item3">
        PL/ENG
    </div>
</header>

Another option is to use absolute positioning for the middle item,

header {
  position: relative;
  display: flex;
}
.item {
  flex: 1;
}
.item2 {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.item3 {
  flex: 1;
  text-align: right;
}
header > div {
  background: lightgray;
  border: 2px dotted red;
}
header > .item2 {
  background: lightblue;
}

<header>
    <div class="item">
        Menu1 Menu2 Menu3 Menu4
    </div>

    <div class="item2">
        logo
    </div>

    <div class="item3">
        PL/ENG
    </div>
</header>

here combined with auto margin.

header {
  position: relative;
  display: flex;
}
.item {
  margin-right: auto;
}
.item2 {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.item3 {
  margin-left: auto;
}
header > div {
  background: lightgray;
  border: 2px dotted red;
}
header > .item2 {
  background: lightblue;
}

<header>
    <div class="item">
        Menu1 Menu2 Menu3 Menu4
    </div>

    <div class="item2">
        logo
    </div>

    <div class="item3">
        PL/ENG
    </div>
</header>