html - Using Flexbox to present 4 images in a ul as a 2x2 grid

Question

I am refactoring non-responsive code and am trying to display the below code as a 2x2 grid using Flexbox. I have tried using display: flex, flex-flow: row-wrap, but the images in my ul are acting as block elements and won't sit side by side.

Here is the original code:

<div class="gallery">
        <h2>Newest Products:</h2>
        <ul>
           <li><img src="http://placehold.it/360x240" alt="First gallery image" /></li>
           <li><img src="http://placehold.it/360x240" alt="Second gallery image" /></li>
           <li><img src="http://placehold.it/360x240" alt="Third gallery image" /></li>
           <li><img src="http://placehold.it/360x240" alt="Fourth gallery image" /></li>
        </ul>
     </div>

.gallery {
   clear: both;
}

.gallery ul {
   list-style: none;
   margin: 32px 0;
}

.gallery li {
   float: left;
   margin: 0 10px;
}

.gallery img {
   width: 280px;
   height: auto;
}

This screenshot is what happened when I tried using this code:

.gallery {
clear: both;
display: flex;
flex-flow: row wrap;
}
.gallery ul {
   list-style: none;
   margin: 32px 0;
}
.gallery li {
margin: 0 10px;
flex-basis: 50%;
}
.gallery img {
width: 50%;
height: auto;
}

Again, all I want to do is place these images in a responsive 2x2 orientation. Thanks!

Answer 1

HTML (no changes)

CSS

.gallery {}

.gallery ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 32px 0;
}

.gallery li {
    margin: 0 10px;
    flex-basis: calc(50% - 20px);  /* width minus margins */
}

.gallery img {
    width: 100%;                   /* occupy 100% width of li container */
    height: auto;
}

DEMO

NOTES:

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

  In your code, .gallery is the flex container. This means that its children – h2 and ul – are flex items. However, the children of the ul are not flex items and flex properties don't apply. That's why the images, contained in the li elements, "are acting as block elements and won't sit side by side".

• To apply flex properties to the li elements, their parent must be made a flex container. By adding display: flex to the ul, the li's become flex items. (Note, the img elements remain inline elements because they are not children of the flex container.)