1

I have an img-gallery which is centralizing now correctly. Problem is that when the image wraps to new line it is also aligning to the center. After wrapping, the image should be vertically lined with the first image in the previous row.

.gallery-links {justify-content: flex-start;}

This makes it almost solved. But after the image wraps, the whole img-gallery is not centralized. See fiddle and snippet:

.gallery-links {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.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">
</section>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Toni
  • 41
  • 4
  • 2
    can you please a screenshot of what you are expecting – Xenio Gracias Feb 12 '19 at 10:44
  • @Temani Please stop having roll back wars. The editor has been spoken to about editing. Let it settle and if it continues we will take action. –  Apr 02 '19 at 14:02
  • @YvetteColomb I am the one who flagged this *war* because my logical edit to improve the question are rolled back each time. You have also made the same edit as I did which what should be done. [I was also removing the css-grid tag that was irrelevant] .. let's hope it will not get rolled back again – Temani Afif Apr 02 '19 at 14:09
  • @TemaniAfif if you rollback an edit and the other person rolls it back, just raise a mod flag instead of having a rollback war. –  Apr 02 '19 at 14:11
  • @YvetteColomb already did a lot of time and for this question too .. it got marked as helpful so I thought the issue is resolved (the editor got contacted) and if I will edit it again it won't be rolled back but unfortunately no .. so I flagged again. Let's hope this will stop because there is a lot of questions that need editing and honestly it doesn't make sense to flag each time the same user will roll back my edit. [let's also delete those comments since they are irrelevant to the question] – Temani Afif Apr 02 '19 at 14:18
  • @TemaniAfif I guess most the questions "that need editing" have already been handled by the moderators, please give me the links to the questions that still need editing - I'm okay to remove the irrelevant tag(s) if they are... no hard feelings mate :) – kukkuz Apr 02 '19 at 14:32
  • @kukkuz simply stop rolling back my edits, if you think an edit is wrong you can explain to me why (we all do mistakes) but automatically rolling back edits without any reason is an abusive behavior. As a side note, you did an edit yesteray to this question https://stackoverflow.com/q/51807504/8620333 and I won't roll it back becasue it's a legit edit but I can argue that you are wrong because the OP added the flexbox tag there initially (not me) so he is probably looking for a flexbox solution. If you think the same for some questions you can argue. I may be mistaken like any human. – Temani Afif Apr 02 '19 at 14:44
  • @TemaniAfif see [here](https://stackoverflow.com/questions/55440471/change-progress-tracker-to-full-span-of-parent-container/55440953?noredirect=1#comment97662225_55440953), I've been educated about this and I'm sorry for any inconvenience caused... and I admit my misconception... I thought you were unnecessarily removing tags, but I get the idea now... if you see an irrelvant tag (and only *if*) you can go ahead and remove it, I'd be grateful for it :) – kukkuz Apr 02 '19 at 14:48

1 Answers1

2

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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • Please don't add the solution to the title, it doesn't make sense. Also, stop having roll back wars. –  Apr 02 '19 at 14:01
  • 1
    Yeah, I got the gist of it as we already discussed in a separate thread, thanks – kukkuz Apr 02 '19 at 14:09