Flex容器对齐四个项目

Question

我在一个flex容器中有四个项目，不幸的是有一些问题。

文本不会相邻放置，即使购物车文本应该居中也不会居中，当我使用google转换为法语时，div重叠在其旁边的按钮而不是移动的按钮。

在伸缩容器中，是否可以移动单个DIVS？

.flex-container {
  margin: 0;
  /* spacing to screen*/
  text-align: center;
  width: 100%;
}

<div class="flex-container">
  <svg aria-hidden="true" focusable="false" role="presentation" class="icon 
    icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0- 
    7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 
    3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 
    5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 
    0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 
    0c.01 1.23-3.86 3-10.16 3z"/></svg>
  <div id="Icontext">Login</div>
</div>

<div class="flex-container">
  <svg aria-hidden="true" focusable="false" role="presentation" class="icon 
    icon-cart" viewBox="0 0 37 40"><path d="M36.5 34.8L33.3 8h-5.9C26.7 3.9 23 
    .8 18.5.8S10.3 3.9 9.6 8H3.7L.5 34.8c-.2 1.5.4 2.4.9 3 .5.5 1.4 1.2 3.1 
    1.2h28c1.3 0 2.4-.4 3.1-1.3.7-.7 1-1.8.9-2.9zm-18-30c2.2 0 4.1 1.4 4.7 3.2h- 
    9.5c.7-1.9 2.6-3.2 4.8-3.2zM4.5 35l2.8-23h2.2v3c0 1.1.9 2 2 2s2-.9 2-2v- 
    3h10v3c0 1.1.9 2 2 2s2-.9 2-2v-3h2.2l2.8 23h-28z"/></svg>
  <div id="Carttext">Cart</div>
</div>