I recently made the decision to implement the new CSS property "display:flex;" in one of my projects. Despite reading numerous articles on the topic, I was unsure whether it was possible to create a layout using this property without compromising the integrity of the HTML code.
Here is a preview of what I am working on:
.container {
width:910px;
display:flex;
}
figure {
position:relative;
width:300px;
height:180px;
}
figure:first-child {
width:600px;
height:370px;
}
figure:first-child figcaption {
width:590px;
}
figure figcaption {
position:absolute;
z-index:10;
bottom:0;
left:0;
padding:5px;
width:290px;
background-color:rgba(0,0,0,.3);
}<div class="container">
<figure>
<img src="http://placehold.it/600x370" alt="">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/300x180" alt="">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/300x180" alt="">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
</figure>
</div>If you want to see the code in action, check out the link to the JSFiddle
Please excuse any language errors in my explanation.