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;
}

The `justify-content:center;` you commented out seems to work for me. BTW `//` isn't valid CSS comment syntax. http://codepen.io/anon/pen/dGWJjQ — j08691, Jan 08 '16 at 20:28

score 5 · Accepted Answer · answered Jan 08 '16 at 20:29

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>

Great answer @Josh and thank you for the explanation. I had previously tried to make the `img` elements flex items by adding `display:flex` to `.images` but I realize now is that I was also missing was the `flex-wrap:wrap` property. I was just doing `display:flex` `justify-content:center` and was not seeing the images centered up. When adding the `flex-wrap` property everything becomes centered. — brent_white, Jan 08 '16 at 22:58

score 3 · Answer 2 · edited May 23 '17 at 10:28

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

Centering multiple images horizontally with flexbox

HTML

CSS

2 Answers2

Linked