What is the best to list some images using hmtl / css

Question

I'm trying to find an easy an flexible way to list a collection (amount of images can change) of images on a homepage. I found a solution, but the last image is aligned to the right.

I found this method link on w3 school, but it makes the last image in the next row to be aligned to the right, and I can't figure out why.

Can anyone help, to make the image align to the left side of the screen. Other methods are also very welcome.

Answer 1

Here is a small example which uses a flex to display the images:

img {
  width: 200px;
  height: 200px;
  background: green;
  flex: 1 1 auto;
}

.images {
  display: flex;
  justify-content: flex-start;
  overflow: auto;
  flex-flow: row wrap;
}

Here is an example.