Wrapping flex items in the last row [duplicate]

Answer 1

Flexbox can't solve this:

So the issue is that your last row would be centered if you use justify-content: center which you don't want, and if you use flex-start alignment, then your flexbox will have some space at the right side.

View the below snippets in full screen such that you get two images in a row and take a look at the last image.

1. Giving justify-content: center, the last image is not aligned to the left:

   .gallery-links {
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     align-items: center;
     border: 1px solid;
   }
   
   .gallery-img {
     flex-basis: 300px;
     margin: 10px;
   }
   
   .gallery-img img {
     width: 100%;
   }

   <section class="gallery-links">
     <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img1">
     <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img2">
     <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img3">
     <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img4">
     <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img1">
    
   </section>

2. Giving justify-content: flex-start there is a misalignment of the flexbox as a whole towards the left side:

   .gallery-links {
     display: flex;
     flex-flow: row wrap;
     justify-content: flex-start;
     align-items: center;
     border: 1px solid;
   }
   
   .gallery-img {
     flex-basis: 300px;
     margin: 10px;
   }
   
   .gallery-img img {
     width: 100%;
   }

   <section class="gallery-links">
     <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img1">
     <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img2">
     <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img3">
     <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img4">
     <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img1">
    
   </section>

This is a limitation of flexbox as it is only a one-dimensional layout solution.

---

But CSS Grids can:

For a 2D solution, CSS Grid is preferred. See below demo where your issue has been solved-

1. A wrapping grid with 300px boxes is achieved using grid-template-columns: repeat( auto-fit, 300px).

2. For centering the grid we use justify-content: center.

3. Use grid-gap for the margins.

See demo below:

.gallery-links {
  display: grid;
  grid-template-columns: repeat( auto-fit, 300px);
  justify-content: center;
  grid-gap: 10px;
  border: 1px solid;
}

.gallery-img {
  width: 100%;
}

<section class="gallery-links">
  <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img1">
  <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img2">
  <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img3">
  <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img4">
  <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img1">
  <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img2">
  <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img3">
</section>