Centering multiple images horizontally with flexbox

Question

The issue I'm encountering is when I add four images to the .images container the justify-content:center property which I am applying to center up the images horizontally on page does not work.

However when I only have two images inside the .images container I get the images horizontally centered.

I've been able to find a solution to centering the images up horizontally by using the text-align property on the .images container. This feels slightly like a hack though.

CODE PEN

HTML

<div class="proj_images">
    <div class="images">
        <img class="disp1" src="http://placehold.it/450x350.png" alt="">
        <img class="disp2" src="http://placehold.it/450x350.png" alt="">
        <img class="disp3" src="http://placehold.it/450x350.png" alt="">
        <img class="disp4" src="http://placehold.it/450x350.png" alt="">
    </div>
</div>

CSS

.proj_images{
    display: flex;
    width:100%;

}

.images{
 text-align:center;
}

Answer 1

Aside from the solution that you already have, you could also set the display of the .images element to flex, and then add justify-content: center along with flex-wrap: wrap.

When you set justify-content: center on the .proj_images element, that was only centering the children flexbox items (which would be .images and not the descendant img elements). Which is why you would need to set those properties/values on the direct parent of the img elements (so that the img elements themselves are flexbox items).

.images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

<div class="proj_images">
  <div class="images">
    <img class="disp1" src="http://placehold.it/250x150.png" alt="">
    <img class="disp2" src="http://placehold.it/250x150.png" alt="">
    <img class="disp3" src="http://placehold.it/250x150.png" alt="">
    <img class="disp4" src="http://placehold.it/250x150.png" alt="">
  </div>
</div>

Answer 2

When you create a flex container (by applying display: flex or display: inline-flex to an element), the child elements become flex items. The descendants of the flex container beyond the children do not become flex items and, therefore, do not accept flex properties.

When you make .proj_images a flex container, flex properties apply to a singular flex item: .images. To apply flex properties to the four images, add display: flex to .images.

Also, when you establish a flex container, several default rules go into effect. Two of these rules are flex-direction: row and flex-wrap: nowrap. If you want the images to align vertically or to wrap, you'll need to override these defaults with flex-direction: column and flex-wrap: wrap.

For more details on centering flex items horizontally (and vertically), see my answer here: https://stackoverflow.com/a/33049198/3597276