Html 如何将图像放置在flexbox内的同一行中

因此，为了响应，我创建了一个flexbox并在其中放置了一些图像，但由于某些原因，我无法将所有图像放置在同一行中。下面是我的CSS代码。容器项目是我放置所有图像的div的类，项目img类是放置在div内的每个图像的类

    .container-projects{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    .project-img{
      width: 25%;
      height: auto;
      border-radius: 30px;
      padding: 20px;
    }

---

在

.container项目

容器中，设置

flex wrap:nowrap

规则。

添加

对齐项目：居中

   .container-projects{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
    }

我看到两个问题

一个是您将
flex wrap
设置为
wrap
，这意味着flex项目将从上到下包装到多行。尝试将其设置为
nowrap

第二个取决于你要把多少图像放进队列中。如果是4，那么您就可以了，否则您需要更改
宽度：25%设置为不同的值，因为此时它将包含区域的宽度除以4。您可能需要查看
flex basis
属性。它在分配剩余空间之前定义元素的默认大小。
添加
html
code以更好地解决问题。删除
flex wrap:wrap
，图像将保持在同一行