无法使用 flexbox 将所有图像放在同一行中答案

【问题标题】：Can't fit all images in the same row using flexbox无法使用 flexbox 将所有图像放在同一行中
【发布时间】：2020-07-26 05:12:48
【问题描述】：

我正在尝试在 flexbox 容器的同一行中获取 4 个图像。出于某种原因，我只看到四个图像中的三个。第四个图像没有显示任何地方。我已经尝试了我所知道的关于 flexbox 的一切，例如。 flex-basis、flex-shrink 等，但我似乎无法正确处理。有人可以告诉我如何创建这个容器并将所有四个图像都放在同一行吗？非常感谢！

.services-images-container {
  display: flex;
}

.services-images-item {
}

<section class="services-images-container">
    <img class="services-imagesitem" src="https://picsum.photos/id/300/300" alt="Example image">
    <img class="services-imagesitem" src="https://picsum.photos/id/300/300" alt="Example image">
    <img class="services-imagesitem" src="https://picsum.photos/id/300/300" alt="Example image">
    <img class="services-imagesitem" src="https://picsum.photos/id/300/300" alt="Example image">
  </section>

【问题讨论】：

您的 sn-p 工作正常。
在您的屏幕上，可能是容器的宽度小于图像宽度的总和。如果是这种情况，Flex-box 会自动包装东西。如果您需要将其全部放在一行上，您可以考虑在较小的屏幕上减少图像的宽度。

标签： css flexbox

【解决方案1】：

您可以指定img 元素的宽度以适应行，如下所示：

.services-images-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.services-images-item {
  max-width: 300px;
  width: 100%;
  object-fit: cover;
}

【讨论】：