get image and caption into one flex item? - css

Question

AI want to put an image and its caption into one flex-item and have several such flex-items in one flex-container. I want the image to be above its caption. But what happens is that each caption is beside its image. How do I get them one above the other?
I tried putting the captions into another flex-container below the images. But when the screen size is less wide, the images stack, then the captions stack instead of being image, then its caption, image, then its caption.
<div class="flex-item-popup" id="popup">
<div class="close"><i class="fa fa-2x fa-times-circle"></i></div>
<h2></h2>
<div class='text'></div>
<div class="videos"></div>
<div class="flex-container images"></div>
<div class="flex-container captions"></div>
</div>
css:
#popup {
width: 90%;
height: auto;
padding: 20px;
border-radius: 10px;
background-color: black;
color: white;
}
#popup .close {
/*position: absolute;
right: 10px;
top: 10px;*/
float: right;
color: white;
opacity: 1;
}
#popup .close:hover {
opacity: .7 !important;
}
.images, .captions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.images {
margin-top: 20px;
}
.images .flex-item, .captions .flex-item {
display: flex;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 300px;
}

Answer 1

Look into <figure> and <figcaption> HTML5 tags. I am pretty certain that is going to help you and it is what you are looking for.
Here is updated fiddle link.
And the SO code snippet here...
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
align-items: center;
}
.flex-item {
/*width: 350px;
height: null;*/
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
justify-content: flex-start;
display: flex;
padding-left: 20px;
}
.flex-item img {
cursor: pointer;
}
<div class="flex-container images">
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/grads.jpg" />
<!--<div style="clear: both;"></div>-->
<figcaption>Our grads.</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/building.jpg" />
<figcaption>A building</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/campus.jpg" />
<figcaption>The campus.</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/trio.jpg" />
<figcaption>Three people</figcaption>
</figure>
</div>
</div>
Hope this helps