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

Question

so for responsiveness, I have created a flexbox and placed some images inside but for some reason, I am not able to place all the images in the same line. written below is my CSS code. the container-project is the class for the div in which I am placing all the images and the project-img class is the class for every image placed inside the div.

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

Answer 1

so for responsiveness, I have created a flexbox and placed some images inside but for some reason, I am not able to place all the images in the same line. written below is my CSS code. the container-project is the class for the div in which I am placing all the images and the project-img class is the class for every image placed inside the div.

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

Answer 2

I see two issues.

One is that you've set flex-wrap to wrap which means that flex items will wrap onto multiple lines, from top to bottom. Try setting it to nowrap instead.

The second depends on how many images you're trying to put in the line. If it's 4 then you're fine, otherwise you want to change the width: 25%; to a different value as at the moment it will be dividing the width of the containing area in to 4. You might want to look into the flex-basis property instead. It defines the default size of an element before the remaining space is distributed.

Answer 3

Add align-items: center;

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