listimageflexibility

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

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.

enter image description here

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.

Solution

  • 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.