html - 使用 Flexbox 对齐图像

Question

我试图在顶部放置 1 张图片，在其下方放置 2 张图片，横跨顶部图片宽度的一半。我遇到的问题是 2 个图像的对齐问题，在这些图像中，它们不能很好地位于顶部图像下方，但与两侧间隔完美。我试图让 2 个图像位于顶部图像的下方，在中心完全对齐且下方没有空格。当我缩小窗口时，即看起来我希望它在全屏上显示，但没有空格。我还希望它们在屏幕中央完美对齐。

https://jsfiddle.net/voryuja8/

.first {
  display: flex;
}

.first img {
  margin: auto;
  max-width: 800px;
}

.second {
  display: flex;
}

.second img {
  margin: auto;
  flex: 1;
  max-width: 400px;
}

<div class="first">
  <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>

<div class="second">
  <img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
  <img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>

Answer 1

只需从图像中删除 margin:auto 并在 flex 容器中使用 justify-content: center。

.first {
  display: flex;
  justify-content: center;
}

.first img {
  max-width: 800px;
}

.second {
  display: flex;
  justify-content: center;
}

.second img {
  flex: 1;
  max-width: 400px;
}

<div class="first">
  <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>

<div class="second">
  <img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
  <img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>