I am using flex box with flex-wrap to display images in tracks. I can make a break within the flex box but how can I display the following div after all the images. See sample : dynamic track gallery
The div element at the bottom "This div should display after all the images!" is displayed directly after the div "my-flex-container" even when the number of flex-item elements extend below the height of the container.
Inside that div, I can break to display a text on the next line "This is a break".
So what must I insert before the footer to display after the break?
<style type="text/css">
.my-flex-container {
height: 200px;
}
.my-flex-item {
background-color: black;
border: 2px solid black;
height: 200px;
}
.break {
flex-basis: 100%;
height: 0;
color:white;
}
.img-holder {position: relative; display: inline-block;}
.img-holder img {display: block;}
.img-holder p {
position: absolute;
bottom:-15%;
left: 0;
right: 0;
transform: translate(0, -50%);
text-align: center;
font-size:0.6em;
color: #fff;
text-shadow: 0 0 15px;
background-color: rgba(0,0,0,0.5);
width:100%;
height:10%;
}
</style>
<body style="background-color:black;">
<div class="container-fluid" style="max-width:1600px;">
<div class="row" style="margin-top:100px;">
<div class="col-12">
<div class="d-flex flex-row flex-wrap my-flex-container justify-content-center">
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_106110.jpg" /></a>
<p>PG_106110</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_131688.jpg" /></a>
<p>PG_131688</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_106110.jpg" /></a>
<p>PG_106110</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_105283.jpg" /></a>
<p>PG_105283</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_100526.jpg" /></a>
<p>PG_100526</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_132445.jpg" /></a>
<p>PG_132445</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_105203.jpg" /></a>
<p>PG_105203</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_105796.jpg" /></a>
<p>PG_105796</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_106107.jpg" /></a>
<p>PG_106107</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_105203.jpg" /></a>
<p>PG_105203</p>
</div>
...
<div class="break">This is a break</div>
</div>
</div>
</div>
</div>
<div class="container-fluid footer" style="max-width:1600px;">
<div class="row" style="margin-top:100px; margin-bottom:28px;">
<div class="col-12" style="background-color:red; height:100px;">
This div should display after all the images!
</div>
</div>
</div>
