css - 使用 flexbox 在断点处居中图像

Question

我有一个包含三个图像的容器。在移动布局中，两个在左侧，一个在右侧。当我遇到较大的断点时，我希望中间的图像居中。我一直在尝试使用 flexbox 来解决这个问题，但我无法将图像居中。我知道可以使用 position: absolute 来完成，但我想知道是否有办法使用 flexbox 来完成。

.container{
  display:flex;
}
.left {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.back {
  height: 20px;
}
.logo {
  height: 30x;
}

@media (min-width: 640px){
  .left {
    justify-content: space-between;
  }
}

<div class="container">
  <div class="left">
    <img class="back" src="https://placeimg.com/20/20/animals"/>
    <img class="logo" src="https://placeimg.com/200/50/animals"/>
  </div>
  <div class="right">
    <img src="https://placeimg.com/100/20/animals"/>
  </div>
</div>

Answer 1

将 margin:0 auto; 添加到大屏幕尺寸的 .logo。

@media (min-width: 640px){
   .logo{
      margin:0 auto;
   }
}

.container{
  display:flex;
}
.left {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.back {
  height: 20px;
}
.logo {
  height: 30x;
}

@media (min-width: 640px){
  .logo{
    margin:0 auto;
  }
}

<div class="container">
  <div class="left">
    <img class="back" src="https://placeimg.com/20/20/animals"/>
    <img class="logo" src="https://placeimg.com/200/50/animals"/>
  </div>
  <div class="right">
    <img src="https://placeimg.com/100/20/animals"/>
  </div>
</div>