弹性盒子。将行中的一个对象放在中心（不知道其他对象的大小）

Question

我在处理一个网站的页眉，但我遇到了 flexbox 问题。无论项目 1 或 3 中有什么项目，我都想将徽标（项目 2）放在完美的中心。我希望项目 1 始终位于左侧，对象 3 始终位于右侧。另外，如果考虑第二个框中的对象是 SVG 图形。

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>

如果有人能帮我解决这个问题就太好了。

编辑：我稍微更改了代码以正确表示我正在努力解决的问题。

Answer 1

这可以通过多种方式完成，通过添加背景颜色，您会发现它们的行为有些不同。

你可以给最外面的东西flex: 1（我也去掉了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>

另一种选择是对中间项使用绝对定位，

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>

此处结合自动保证金。

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>

弹性盒子。将行中的一个对象放在中心（不知道其他对象的大小）

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

css

centering

flexbox