flex 如何使中间项真正居中？

使用 flexbox，子项的宽度不一时，无论我们使用 justify-content 的什么配置（space-between, space-around, 等），都无法使中间项真正居中。

要让中间项真正居中，需要对 HTML 结构做一些调整，具体如下：

#container {
  display: flex;
}
.flex {
  flex: 1;
}


<div id="container">
  <div class="left flex">
    <div>Left Side</div>
  </div>
  <div class="center flex">
    <div>I want this centered</div>
  </div>
  <div class="right flex">
    <div>Right Side (Extra text for extra length)</div>
  </div>
</div>

原文链接如下，我对 css 代码进行了简化：https://stackoverflow.com/a/37891978/3054511